D3.js 3.5.9

今回は、SVG を使用して配列データを円の画像で描画してみます。

html の内容はサンプルページを見ていただくとして、スクリプトはTypeScriptを使用するため、下記のソースを Playground でJavaScriptコードにコンパイルして使用してください。

---javascript08.ts---

function show08()
{
   var width: number = 500;
   var height : number = 200;
   
   var svg = d3.select("body")
               .append("svg")
               .attr("width", width )
               .attr("height", height );
   
   var dataset:number[] = [ 5, 10, 15, 20, 25 ];
   
   var circles = svg.selectAll("circle")
                    .data(dataset)
                    .enter()
                    .append("circle");
   
   // d: 値
   // i: インデックス
   circles.attr("cx", (d, i) => {
              return ( i * 50 ) + 25;
           })
          .attr( "cy", height / 2 )
          .attr( "r", (d) => {
              return d;
           })
          .attr( "fill", "yellow" )
          .attr("stroke", "orange" )
          .attr( "stroke-width", (d) => {
              return ( d / 2 );
           });
}