
102
4 章 Web 開発の基本
#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>
プレースホルダの
SVG
chart
要素を用意したので、
script.js
ファイルの数行の
D3
を使ってデー
タを点在する円に変換します(図
4-19
を参照)。
// 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.circles)
.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: ...