D3.js 3.5.9

今回は軸です。表示領域の左側と下側に表示するメモリのことです。 D3.jsのいいところはスケールに基づいていい感じに表示されるようにメモリ間隔を自動的に調整するところです。 いい感じってなんだといわれてもうまく説明できないですけどね。

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

---javascript12.ts---

function show12()
{
   var width: number = 500;
   var height : number = 200;
   var padding:number = 25;   // オフセット値
   
   var svg = d3.select("body")
               .append("svg")
               .attr("width", width )
               .attr("height", height );
   
   var dataset = [
                  [5, 20], [480, 90], [250, 50], [100, 33], [330, 95],
                  [410, 12], [475, 44], [25, 67], [85, 21], [220, 88], [600, 150]
                 ];

   // x 座標を入力ドメインおよび出力レンジから生成
   // 入力ドメインは入力値の分散値、出力レンジは画面表示上の大きさの分散値を指定
   var xScale = d3.scale.linear()                                                // 線形スケール
                        .domain([0, d3.max(dataset, (d) => {                     // 入力ドメイン：0〜データの最大値
                            return d[0];                                         // x成分を出力
                          })])   
                        .range([padding, width - padding * 2]);                  // 出力レンジ：0〜SVGの横幅いっぱいの範囲( 適当に調整している )

   // y 座標を入力ドメインおよび出力レンジから生成
   var yScale = d3.scale.linear()                                                // 線形スケール
                        .domain([0, d3.max(dataset, (d) => {                     // 入力ドメイン：0〜データの最大値
                            return d[1];                                         // y成分を出力
                          })])   
                        .range([height - padding, padding]);                     // 出力レンジ：0〜SVGの縦幅いっぱいの範囲( 適当に調整している )
                                                                                 // y 方向は原点が左上となるため、右下を原点にするために最小値と最大値を逆転して設定する

   // 円の半径を入力ドメインおよび出力レンジから生成
   var rScale = d3.scale.linear()
                        .domain([0, d3.max(dataset, (d) =>{
                            return d[1];
                          })])
                        .range([2, 5]);
                     
   // 円描画
   var circles = svg.selectAll("circle")
                    .data(dataset)
                    .enter()
                    .append("circle");

   // d: 値
   circles.attr("cx", (d) => {
                         return xScale(d[0]);
                      })
          .attr("cy", (d) => {
                         return yScale(d[1]);
                      })
          .attr("r", (d) => {
                         return rScale(d[1]);
                      })
          .attr("fill", "green");

   // テキスト描画
   var texts = svg.selectAll("text")
                    .data(dataset)
                    .enter()
                    .append("text");

   texts.attr("x", (d) => {
                       return xScale(d[0]);
                    })
        .attr("y", (d) => {
                       return yScale(d[1]);
                    })
        .attr("font-family", "sans-serif")
        .attr("font-size", "15")
        .attr("fill", "black")
        .text((d) => {
                  return d[0] + "," + d[1];
               });
   
   // 軸生成
   var xAxis = d3.svg.axis();
   xAxis.scale( xScale )     // スケールから軸を生成する
        .orient("botton")    // 軸を下側にラベル表示
        .ticks(5);           // メモリ数を5に指定( 実際にはいい感じに表示されるようにメモリ数を増減する )
        
   svg.append("g")   // SVG用の要素。オブジェクトをグループ化する。g要素はuse要素を使用して参照できる。
      .attr("class", "axis")  // スタイルシートで属性を変更するためにclass属性を追加
      .attr("transform", "translate( 0, " + ( height - padding ).toString(10) + ")" )   // y方向に平行移動( 原点は左上 )
      .call(xAxis);

   var yAxis = d3.svg.axis();
   yAxis.scale( yScale )     // スケールから軸を生成する
        .orient("left")      // 軸を左側にラベル表示
        .ticks(5);           // メモリ数を5に指定( 実際にはいい感じに表示されるようにメモリ数を増減する )
        
   svg.append("g")   // SVG用の要素。オブジェクトをグループ化する。g要素はuse要素を使用して参照できる。
      .attr("class", "axis")  // スタイルシートで属性を変更するためにclass属性を追加
      .attr("transform", "translate( " + ( padding ).toString(10) + ", 0 )" )   // x方向に平行移動
      .call(yAxis);

}

.axis path,
.axis line{
   fill: none;                    /* 塗りつぶさない */
   stroke: black;                 /* 線の色 */
   shape-rendering: crispEdges;   /* アンチエイリアスを無効 */
}

.axis text {
   font-family: sans-serif;
   font-size: 11px;
}