d3

軸コンポーネント

25 May 2014

データセットとスケールが与えられたら、 D3.js軸コンポーネントは、グラフに簡単に水平軸と垂直軸を追加できます。

軸コーンポーネントは、自動的に目盛りを表示します。

Generating a D3.js Axis

軸を生成するには。

var xAxis = d3.svg.axis();

スケール変数をスケール関数に渡し、軸のスケールを設定します。

var axisScale = d3.scale.linear()
                         .domain([0,100])
                         .range([0,100]);

var xAxis = d3.svg.axis()
                  .scale(axisScale);

typeof(xAxis);

ノート:typeof(xAxis)は、JavaScriptに xAxis変数が何であるかを伝えています。

//Create the SVG Viewport
var svgContainer = d3.select("#ins01").append("svg")
                                     .attr("width", 400)
                                     .attr("height", 100);

//Create the Scale we will use for the Axis
var axisScale = d3.scale.linear()
                         .domain([0, 100])
                         .range([0, 400]);

//Create the Axis
var xAxis = d3.svg.axis()
                   .scale(axisScale);

typeof(xAxis);

//Create an SVG group Element for the Axis elements and call the xAxis function
var xAxisGroup = svgContainer.append("g")
                              .call(xAxis);

上記ので表示した軸

属性を設定します .attr("stroke","white")

var xAxisGroup = svgContainer.append("g")
                             .attr("stroke","white")
                             .call(xAxis);

属性を設定します .style("fill","none")

var xAxisGroup = svgContainer.append("g")
                             .attr("stroke","white")
                             .style("fill","none")
                             .call(xAxis);

ticksの設定

//Create the Axis
var xAxis04 = d3.svg.axis()
                   .scale(axisScale)
                   .orient("bottom")
                   .ticks(5); // <<<<

tickvalueの設定

//Create the Axis
var xAxis04 = d3.svg.axis()
                   .scale(axisScale)
                   .orient("bottom")
                   .tickValues([0, 25, 50, 75, 100]); //<<<<

x,y 軸の例

/* Scale*/
var scale06X = d3.scale.linear()
                          .domain([0,4.5])
                          .range([40,590]);
                          
var scale06Y = d3.scale.linear()
                           .domain([4.2,-3])
                           .range([10,380]);   
/* 軸 */
var xAxis06 = d3.svg.axis()
                  .scale(scale06X)
                  .tickValues([1, 2, 3, 4])
                  .tickPadding(10)
                  .tickFormat(d3.format("d"));

var xAxis06Group = svg06.append("g")
                      .attr("transform","translate(0,"+ scale06Y(0)+")")
                      .attr("stroke","white")
                      .attr("stroke-width","2")
                      .style("fill","none")
                      .call(xAxis06);   

var yAxis06 = d3.svg.axis()
                  .scale(scale06Y)
                  .orient(["left"])
                  .tickPadding(2)
                  .tickValues([-2,-1,0,1,2,3,4])
                  .tickFormat(d3.format("d"));

var yAxis06Group = svg06.append("g")
                      .attr("transform","translate(" + scale06X(0) + ",0)")
                      .attr("stroke","white")
                      .attr("stroke-width","2")
                      .style("fill","none")
                      .call(yAxis06);                                 

A couple of things to notice: