PythonとJavaScriptではじめるデータビジュアライゼーション

92

4 章　Web 開発の基本

svg#chart {

background: lightgray;

}

</style>

<svg id="chart" width="300" height="225">

</svg>

<!--

サードパーティライブラリと

JS

スクリプト

-->

<script src="http://d3js.org/d3.v3.min.js"></script>

<script src="script.js"></script>

これで小さな

SVG

キャンバスの準備ができたので、描画を開始してみましょう。

4.7.2

 

<g>

要素

グループ要素

<g>

を使って

<svg>

要素内で形をグループ化できます。「

4.7.9

 グループ」で説明

するように、グループに含まれる形は一緒に操作でき、位置、縮尺、不透明度などを変更します。

4.7.3

 円

小さくシンプルな静的な棒グラフから、インタラクティブ性を最大限利用した複雑な地理表現ま

での

SVG

可視化を作成するには、線、円、強力なパスなどの限られた種類のグラフィックスプリ

ミティブから組み立てる必要があります。それぞれの要素には独自の

DOM

タグがあり、変更に

伴い更新されます

†

。例えば、

x

と

y

属性は

<svg>

やグループ（

<g>

）コンテキスト内の変換を反映

して変更されます。

例を示すために、

<svg>

コンテキストに円を追加しましょう。

<svg id="chart" width="300" height="225">

<circle r="15" cx="100" ...