Axes--D3 Interactive Data Visualization for the web

D3's axes are actually functions whose parameters you define. 

when an axis function is called, it doesn't return a value like scale, but generate the visual elements of the axis, including lines, labels

, and ticks.

Axis functions are SVG-specific, as they generate SVG elements. 

Set up an axis

1. 

// create a generic axis function

var xAxis = d3.svg.axis();

2. tell axis on what scale to operate

// pass scale to axis

xAxis.scale(xScale);

3. 

// specify where the labels appear relative to the axis itself.

xAxis.orient("bottom")

define axis function   :              var xAxis = d3.svg.axis()

                   .scale(xScale)

                 .orient("bottom");

4.  //call axis. Call axis at the end of script, so the axis appears on top

svg.append("g").attr("class","axis").call(xAxis); // although g isn't strictly necessary, we are using it because the axis function is about to generate lots of crazy lines and numbers. and it's nice to have those elements within a single group object. 

.call(function,[arguments...]) : this will invoke specified functions, this will return the current selection.

5.  // use CSS  to style axis; the axes itself is composed of path, line, text

.axis path, 

.axis line {

fill: none;

stroke: black;

shape-rendering: crispEdges;           // this can make axis and its tick mark lines are pixel-perfect; no blurry axes for us.

}

.axis text{

font-family:sans-serif;

font-size:11px;

}

6.  //transform the whole axes to the bottom

svg.append("g").attr("class","axis").attr("transform","translate(0,"+h-padding+")").call(xAxis);

translation transform: 平移变换

translate(x,y): x and y are the number of pixels by which to translate the element. 

7. Ticks: customize ticks 

                  var xAxis = d3. svg.axis()

.scale("xScale)

.orient("bottom")

.ticks(5); // the result is not necessary exactly 5 ticks, D3 will adjust this according to the range 

8.  yAxis

// set up an axis

var yAxis = d3.svg.axis()

.scale(yScale)

.orient("left")

.ticks(5);

  //call yAxis

svg.append("g").attr("class","axis").attr("transform","translate("+padding+",0)").call(yAxis);

9. Format Tick Labels

点击打开链接 (python format spec)

var zero = d3.format("04d");      zero(2);//return 0002         zero(123); //return 0123

var formatAsPercentage = d3.format(".1%");

                                                 var yAxis = d3.svg.axis()
 .scale(yScale)
 .orient("left")
 .ticks(5)
 .tickFormat(formatAsPercentage);