4.7.3円
<!-- index.html -->
<!DOCTYPE html>
<meta charset="utf-8">
<style>
svg#chart{
background: lightgray;
}
</style>
<svg id="chart" width="300" height="225">
<circle r="15" cx="100" cy="50"></circle>
</svg>
<body>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="script.js"></script>
</body>
結果
4.7.4 CSSスタイルの運用
<!-- index.html -->
<!DOCTYPE html>
<meta charset="utf-8">
<style>
svg#chart{
background: lightgray;
}
#chart circle{fill:lightblue}
</style>
<svg id="chart" width="300" height="225">
<circle r="15" cx="100" cy="50"></circle>
</svg>
<body>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="script.js"></script>
</body>
結果
4.7.5線、矩形、多角形
<!-- index.html -->
<!DOCTYPE html>
<meta charset="utf-8">
<style>
svg#chart{
background: lightcoral;
}
#chart circle{fill:lightblue}
#chart line{stroke: #555555;stroke-width: 2}
#chart rect{stroke: red;fill: white}
#chart polygon{fill:green}
</style>
<svg id="chart" width="300" height="225">
<circle r="15" cx="100" cy="50"></circle>
<line x1="20" y1="20" x2="20" y2="130"></line>
<line x1="20" y1="130" x2="280" y2="130"></line>
<rect x="240" y="5" width="55" height="30"></rect>
<polygon points="210,100,230,100,220,80"></polygon>
</svg>
<body>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="script.js"></script>
</body>
結果
4.7.6テキスト
<!-- index.html -->
<!DOCTYPE html>
<meta charset="utf-8">
<style>
svg#chart{
background: lightcoral;
}
#chart circle{fill:lightblue}
#chart line{stroke: #555555;stroke-width: 2}
#chart rect{stroke: red;fill: white}
#chart polygon{fill:green}
</style>
<svg id="chart" width="300" height="225">
<circle r="15" cx="100" cy="50"></circle>
<line x1="20" y1="20" x2="20" y2="130"></line>
<line x1="20" y1="130" x2="280" y2="130"></line>
<rect x="240" y="5" width="55" height="30"></rect>
<polygon points="210,100,230,100,220,80"></polygon>
<text id="title" text-anchor="middle" x="150" y="20">
A Dummy Chart
</text>
<text x="20" y="20" transform="rotate(-90,20,20)" text-anchor="end" dy="0.71em">
y axis label
</text>
</svg>
<body>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="script.js"></script>
</body>
結果
4.7.7パス
<!-- index.html -->
<!DOCTYPE html>
<meta charset="utf-8">
<style>
svg#chart{
background: lightcoral;
}
#chart circle{fill:lightblue}
#chart line{stroke: #555555;stroke-width: 2}
#chart rect{stroke: red;fill: white}
#chart polygon{fill:green}
#chart path{stroke:red; fill:none}
</style>
<svg id="chart" width="300" height="225">
<circle r="15" cx="100" cy="50"></circle>
<line x1="20" y1="20" x2="20" y2="130"></line>
<line x1="20" y1="130" x2="280" y2="130"></line>
<rect x="240" y="5" width="55" height="30"></rect>
<polygon points="210,100,230,100,220,80"></polygon>
<text id="title" text-anchor="middle" x="150" y="20">
A Dummy Chart
</text>
<text x="20" y="20" transform="rotate(-90,20,20)" text-anchor="end" dy="0.71em">
y axis label
</text>
<path d="M20 130L60 70L110 100L160 45"></path>
</svg>
<body>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="script.js"></script>
</body>
結果
<!-- index.html -->
<!DOCTYPE html>
<meta charset="utf-8">
<style>
svg#chart{
background: lightgray;
}
#chart path{stroke:red; fill:none}
</style>
<svg id="chart" width="300" height="150">
<path d="M40 40
A30 40
0 0 1
80 80
A50 50 0 0 1 160 80
A30 30 0 0 1 190 80
">
</svg>
<body>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="script.js"></script>
</body>
結果
<!-- index.html -->
<!DOCTYPE html>
<meta charset="utf-8">
<style>
svg#chart{
background: lightgray;
}
#chart path{stroke:red; fill:none}
</style>
<svg id="chart" width="300" height="150">
<path d="M40 80
A30 40 0 0 1 80 80
A30 40 0 0 0 120 80
A30 40 0 1 0 160 80
A30 40 0 1 1 200 80
">
</svg>
<body>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="script.js"></script>
</body>
結果
4.7.8拡大縮小と回転
<!-- index.html -->
<!DOCTYPE html>
<meta charset="utf-8">
<style>
svg#chart{
background: lightgray;
}
#chart path{stroke:red; fill:none}
</style>
<svg id="chart" width="300" height="150">
<rect width="20" height="40" transform="translate(60,55)" fill="blue"/>
<rect width="20" height="40" transform="translate(120,55),rotate(45)" fill="blue"/>
<rect width="20" height="40" transform="translate(180,55),scale(0.5)" fill="blue"/>
<rect width="20" height="40" transform="translate(240,55),rotate(45),scale(0.5)" fill="blue"/>
</svg>
<body>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="script.js"></script>
</body>
結果
4.7.9グループ
<!-- index.html -->
<!DOCTYPE html>
<meta charset="utf-8">
<style>
svg#chart{
background: lightgray;
}
</style>
<svg id="chart" width="300" height="150">
<g id="shapes" transform="translate(150,75)">
<circle cx="50" cy="0" r="25" fill="red"/>
<rect x="30" y="10" width="40" height="20" fill="blue"/>
<path d="M-20 -10 L50 -10L10 60Z" fill="green"/>
<circle r="10" fill="yellow"/>
</g>
</svg>
<body>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="script.js"></script>
</body>
結果
<!-- index.html -->
<!DOCTYPE html>
<meta charset="utf-8">
<style>
svg#chart{
background: lightgray;
}
#chart circle{opacity:0.33}
</style>
<svg id="chart" width="300" height="150">
<g transform="translate(150,75)">
<circle cx="0" cy="-20" r="30" fill="red"/>
<circle cx="17.3" cy="10" r="30" fill="green"/>
<circle cx="-17.3" cy="10" r="30" fill="blue"/>
</g>
</svg>
<body>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="script.js"></script>
</body>
結果
4.7.11 JavaScriptによるSVG
index.html
<!-- index.html -->
<!DOCTYPE html>
<meta charset="utf-8">
<style>
svg#chart{
background: lightgray;
}
#chart circle{fill:red}
</style>
<body>
<svg id="chart" >
</svg>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="script.js"></script>
</body>
script.js
var chartCircles = function(data){
var chart = d3.select('#chart');
chart.attr('height',data.height).attr('width',data.width);
chart.selectAll('circle').data(data.circle)
.enter()
.append('circle')
.attr('cx',function(d){return d.x})
.attr('cy',function(d){return d.y})
.attr('r',function(d){return d.r});
};
var data ={
width:300,height:150,
circle:[
{'x':50,'y':30,'r':20},
{'x':70,'y':80,'r':10},
{'x':160,'y':60,'r':10},
{'x':200,'y':100,'r':5}
]
};
chartCircles(data);
結果
