D3——Axes

使用d3.svg.axis() 创建一个 axis function:

var xAxis = d3.svg.axis();

an axis function is called, it doesn’t return a value, but generates the visual elements of the axis, including lines, labels, and ticks.

xAxis.scale(xScale);

设置label相对axis的位置，默认为bottom, 对horizontal axes(横轴)来说可以设置的值为 top and bottom. For vertical axes(纵轴), use leftand right:

 xAxis.orient("bottom");

链式写法：

var xAxis = d3.svg.axis()
                  .scale(xScale)
                  .orient("bottom");

将横轴添加到画布svg上（to actually generate the axis and insert all those little lines and labels into our SVG, we must call the xAxis function）

svg.append("g")
    .call(xAxis);

例子：

 <script type="text/javascript">

       //Width and height
       var w = ;
       var h = ;
       var padding = ;

       var dataset = [
            [, ], [, ], [, ], [, ], [, ],
                [, ], [, ], [, ], [, ], [, ],
                [, ]
     ];

     //Create scale functions
     var xScale = d3.scale.linear()
         .domain([, d3.max(dataset, function(d) {
                        return  d[]; })])
         .range([padding, w - padding * ]);

     var yScale = d3.scale.linear()
         .domain([, d3.max(dataset, function(d) {
                               return d[]; })])
          .range([h - padding, padding]);

     var rScale = d3.scale.linear()
         .domain([, d3.max(dataset, function(d) {
                               return  d[]; })])
          .range([, ]);

     //Define X axis
     var xAxis = d3.svg.axis()
         .scale(xScale)
         .orient("bottom");

     //Create SVG element
     var svg = d3.select("body")
         .append("svg")
         .attr("width", w)
         .attr("height", h);

     //Create circles
     svg.selectAll("circle")
         .data(dataset)
         .enter()
         .append("circle")
         .attr("cx", function(d) {
             return xScale(d[]);
         })
         .attr("cy", function(d) {
             return yScale(d[]);
         })
         .attr("r", function(d) {
             return rScale(d[]);
         });

     //Create labels
     svg.selectAll("text")
         .data(dataset)
         .enter()
         .append("text")
         .text(function(d) {
             return d[] + "," + d[];
         })
         .attr("x", function(d) {
                        return xScale(d[]);
         })
         .attr("y", function(d) {
                        return yScale(d[]);
         })
         .attr("font-family", "sans-serif")
         .attr("font-size", "11px")
         .attr("fill", "red");

     //Create X axis
     svg.append("g")
           .call(xAxis);

 </script>                                                    

只创建了横纵轴的例子

 var w = ;
 var h = ;
 var padding = ;

 var dataset = [
         [, ], [, ], [, ], [, ], [, ],[, ], [, ], [, ], [, ], [, ],[, ]
 ]; 

 //create xScale，yScale
 var xScale = d3.scale.linear()
           .domain([, d3.max(dataset, function(d) { return d[]; })])
       .range([padding, w - padding * ]);
 var yScale = d3.scale.linear()
           .domain([, d3.max(dataset, function(d) { return d[]; })])
           .range([h - padding, padding]);

 //define X axis , Y axis
 var xAxis = d3.svg.axis().scale(xScale).orient("bottom");
 var yAxis = d3.svg.axis().scale(yScale).orient("right");

 //Create SVG element
 var svg = d3.select("body")
         .append("svg")
         .attr("width", w)
         .attr("height", h);

 //Create X axis , Y axis

 svg.append("g").call(xAxis);
 svg.append("g").call(yAxis);

   

为axes设置样式

svg.append("g")
    .attr("class", "axis") //Assign "axis" class
    .call(xAxis);

// set css style

.axis path,
.axis line {
    fill: none;
    stroke: black;
    shape-rendering: crispEdges;
}

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

    

将X axis 向下平移

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

上面的例子中我们并没有指定坐标轴的ticks个数，如果没有特别指定，D3会根据我们的scale (eg: xScale)和其他信息自动为我们设置合适个数的ticks。

设置ticks个数：

var xAxis = d3.svg.axis()
                  .scale(xScale)
                  .orient("bottom")
                  .ticks();  //Set rough # of ticks

添加上Y axis:

//reset padding= 30;
var padding = ;

//Define Y axis
var yAxis = d3.svg.axis()
                  .scale(yScale)
                  .orient("left")
                  .ticks();

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

Formatting Tick Labels

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

xAxis.tickFormat(formatAsPercentage);

formatAsPercentage(.);     //"36.5%"
formatAsPercentage(1.2);       //"120.0%"
formatAsPercentage(-.);       //"-50.0%"