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 = 500;
      var h = 300;
      var padding = 20;
            
      var dataset = [
           [5, 20], [480, 90], [250, 50], [100, 33], [330, 95],
               [410, 12], [475, 44], [25, 67], [85, 21], [220, 88],
               [600, 150]
    ];

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

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

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

    //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[0]);
        })
        .attr("cy", function(d) {
            return yScale(d[1]);
        })
        .attr("r", function(d) {
            return rScale(d[1]);
        });

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

</script>                                                    

只创建了横纵轴的例子

var w = 500;
var h = 300;
var padding = 20;

var dataset = [
        [5, 20], [480, 90], [250, 50], [100, 33], [330, 95],[410, 12], [475, 44], [25, 67], [85, 21], [220, 88],[600, 150]
]; 

//create xScale，yScale
var xScale = d3.scale.linear()
          .domain([0, d3.max(dataset, function(d) { return d[0]; })])
      .range([padding, w - padding * 2]);
var yScale = d3.scale.linear()
          .domain([0, d3.max(dataset, function(d) { return d[1]; })])
          .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(5);  //Set rough # of ticks

添加上Y axis:

//reset padding= 30;
var padding = 30;

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


//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(.365);     //"36.5%"
formatAsPercentage(1.2);       //"120.0%"
formatAsPercentage(-.5);       //"-50.0%"