如何使用d3js控制圖形中的刻度值數量

Question

我有一個圖形，它工作正常。但唯一的是，我想減少tick-size.該怎麼做？

例如：我目前的圖有蜱從0開始100它算作11數（10）我如何能在減少這6數字像0開始，以100結束 - 但不是10重複到。 20重複如0,20, 40,60 ..？

這裏是我的代碼：

$(function(){ 
var m = [80, 80, 80, 80]; // margins 
     var w = 300; // width 
     var h = 450; // height 

     var plan = 55; 
     var actual = 38; 
     var variation = plan - actual; 

     var data = [0,plan]; 
     var data1 = [0,actual]; 

     var x = d3.scale.linear().domain([0, 1.25]).range([0, w]); 
     var y = d3.scale.linear().domain([0, 100]).range([h, 0]); 


     var line = d3.svg.line() 

      .x(function(d,i) { 
       return x(i); 
      }) 
      .y(function(d) { 

       return y(d); 
      }) 


      var graph = d3.select("#graph").append("svg:svg") 
        .attr("width", w + m[1] + m[3]) 
        .attr("height", h + m[0] + m[2]) 
       .append("svg:g") 
        .attr("transform", "translate(" + m[3] + "," + m[0] + ")"); 


      var yAxisLeft = d3.svg.axis() 
      .scale(y).tickSize(-w) 
      .orient("left"); 

      graph.append("svg:g") 
        .attr("class", "y axis") 
        .attr("transform", "translate(-0,0)") 
        .call(yAxisLeft); 


       graph.append("svg:path").attr("d", line(data)); 
      graph.append("svg:path").attr("d", line(data1)); 

      //not able to fill the bg between 2 lines 

      var area = d3.svg.area() 
     .x(function(d, i) { return x(i) }) 
     .y0(function(d, i) { return y(data[i]); }) 
     .y1(function(d, i) { return y(data1[i]); }) 

    graph.append("path") 
     .datum(data) 
     .attr("d", area) 
     .attr("fill", "brown") 
     .style("opacity", 0.5); 

}); 

Live Demo

Answer 1

我已經更新了刻度值是這樣的：

$(function(){ 
var m = [80, 80, 80, 80]; // margins 
     var w = 300; // width 
     var h = 450; // height 

     var plan = 55; 
     var actual = 38; 
     var variation = plan - actual; 

     var data = [0,plan]; 
     var data1 = [0,actual]; 

     var x = d3.scale.linear().domain([0, 1.25]).range([0, w]); 
     var y = d3.scale.linear().domain([0, 100]).range([h, 0]); 


     var line = d3.svg.line() 

      .x(function(d,i) { 
       return x(i); 
      }) 
      .y(function(d) { 

       return y(d); 
      }) 


      var graph = d3.select("#graph").append("svg:svg") 
        .attr("width", w + m[1] + m[3]) 
        .attr("height", h + m[0] + m[2]) 
       .append("svg:g") 
        .attr("transform", "translate(" + m[3] + "," + m[0] + ")"); 

      var yAxisLeft = d3.svg.axis() 
      .scale(y) 
      .tickValues(d3.range(0, 120, 20)) 
      .tickSize(-w) 
      .orient("left"); 



      graph.append("svg:g") 
        .attr("class", "y axis") 
        .attr("transform", "translate(-0,0)") 
        .call(yAxisLeft); 


       graph.append("svg:path").attr("d", line(data)); 
      graph.append("svg:path").attr("d", line(data1)); 

      //not able to fill the bg between 2 lines 

      var area = d3.svg.area() 
     .x(function(d, i) { return x(i) }) 
     .y0(function(d, i) { return y(data[i]); }) 
     .y1(function(d, i) { return y(data1[i]); }) 

    graph.append("path") 
     .datum(data) 
     .attr("d", area) 
     .attr("fill", "brown") 
     .style("opacity", 0.5); 

}); 

Live Demo