D3.js-Axis API

D3は、軸を描画する関数を提供します。軸は、線、目盛り、ラベルで構成されます。軸はスケールを使用するため、各軸にはスケールを与える必要があります。

Axis APIの構成

次のスクリプトを使用してAPIを構成できます。

<script src = "https://d3js.org/d3-axis.v1.min.js"></script>
<script>

</script>

Axis APIメソッド

D3は、軸を描くために次の重要な機能を提供します。以下に簡単に説明します。

* d3.axisTop（）*-このメソッドは、上部の水平軸を作成するために使用されます。
* d3.axisRight（）*-このメソッドは、垂直の右向きの軸を作成するために使用されます。
* d3.axisBottom（）*-このメソッドは、下部の水平軸を作成するために使用されます。
* d3.axisLeft（）*-左の垂直軸を作成します。

実施例

x軸とy軸をグラフに追加する方法を学びましょう。これを行うには、以下の手順に従う必要があります。

ステップ1 *-*変数の定義-以下のコードを使用してSVGおよびデータ変数を定義します。

var width = 400, height = 400;
var data = [100, 150, 200, 250, 280, 300];
var svg = d3.select("body")
   .append("svg")
   .attr("width", width)
   .attr("height", height);

ステップ2 *-*スケール線形関数の作成-以下で定義するように、x軸とy軸の両方に対してスケール線形関数を作成します。

var xscale = d3.scaleLinear()
   .domain([0, d3.max(data)])
   .range([0, width - 100]);

var yscale = d3.scaleLinear()
   .domain([0, d3.max(data)])
   .range([height/2, 0]);

ここでは、線形スケールを作成し、ドメインと範囲を指定しました。

ステップ3 *- x軸にスケールを追加*-次のコードを使用して、x軸にスケールを追加できます。

var x_axis = d3.axisBottom()
   .scale(xscale);

ここでは、d3.axisBottomを使用してx軸を作成し、前に定義したスケールを提供します。

ステップ4 *-*スケールをy軸に追加-次のコードを使用してスケールをy軸に追加します。

var y_axis = d3.axisLeft()
   .scale(yscale);

ここでは、d3.axisLeftを使用してy軸を作成し、上記で定義したスケールを提供します。

ステップ5 *-*変換の適用-グループ要素を追加して、以下で定義するx、y軸を挿入できます。

svg.append("g")
   .attr("transform", "translate(50, 10)")
   .call(y_axis);

ステップ6 *-*グループ要素の追加-次のコードを使用して、遷移およびグループ要素を適用します。

var xAxisTranslate = height/2 + 10;
svg.append("g")
   .attr("transform", "translate(50, " + xAxisTranslate  +")")
   .call(x_axis)

ステップ7 *-*作業例-完全なコードリストを次のコードブロックに示します。 Webページ axesl を作成し、次の変更を加えます。

<html>
   <head>
      <script type = "text/javascript" src = "https://d3js.org/d3.v4.min.js"></script>
      <style>
         svg text {
            fill: purple;
            font: 12px sans-serif;
            text-anchor: end;
         }
      </style>
   </head>

   <body>
      <script>
         var width = 400, height = 400;
         var data = [100, 120, 140, 160, 180, 200];
         var svg = d3.select("body")
            .append("svg")
            .attr("width", width)
            .attr("height", height);

         var xscale = d3.scaleLinear()
            .domain([0, d3.max(data)])
            .range([0, width - 100]);

         var yscale = d3.scaleLinear()
            .domain([0, d3.max(data)])
            .range([height/2, 0]);

         var x_axis = d3.axisBottom().scale(xscale);

         var y_axis = d3.axisLeft().scale(yscale);

         svg.append("g")
            .attr("transform", "translate(50, 10)")
            .call(y_axis);

         var xAxisTranslate = height/2 + 10;

         svg.append("g")
            .attr("transform", "translate(50, " + xAxisTranslate  +")")
            .call(x_axis)
      </script>
   </body>
</html>

ここで、ブラウザをリクエストすると、次の変更が表示されます。

D3js-axis-api

目次

D3.js-Axis API

Axis APIの構成

Axis APIメソッド

実施例