d3.js圖線比範圍大

Question

我真的使用d3.js應用於LineChart用下面的代碼：

var data = [{"age":"3","compositions":"1"},{"age":"5","compositions":"6"},{"age":"6","compositions":"5"},{"age":"7","compositions":"4"},{"age":"8","compositions":"9"},{"age":"9","compositions":"7"},{"age":"10","compositions":"16"},{"age":"11","compositions":"11"},{"age":"12","compositions":"11"},{"age":"13","compositions":"12"},{"age":"14","compositions":"19"},{"age":"15","compositions":"15"},{"age":"16","compositions":"30"},{"age":"17","compositions":"29"},{"age":"18","compositions":"21"},{"age":"19","compositions":"22"},{"age":"20","compositions":"29"},{"age":"21","compositions":"24"},{"age":"22","compositions":"28"},{"age":"23","compositions":"19"},{"age":"24","compositions":"13"},{"age":"25","compositions":"25"},{"age":"26","compositions":"36"},{"age":"27","compositions":"29"},{"age":"28","compositions":"23"},{"age":"29","compositions":"26"},{"age":"30","compositions":"24"},{"age":"31","compositions":"30"},{"age":"32","compositions":"33"},{"age":"33","compositions":"20"},{"age":"34","compositions":"9"},{"age":"35","compositions":"30"}] 

     var margin = { 
      top : 70, 
      right : 20, 
      bottom : 50, 
      left : 50 
     }, width = 460, height = 230; 

     var x = d3.scale.linear().range([0, width ]); 

     var y = d3.scale.linear().range([ height, 0 ]); 

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

     var yAxis = d3.svg.axis().scale(y).orient("left"); 

     var line = d3.svg.line().x(function(d) { 
      return x(d.age); 
     }).y(function(d) { 
      return y(d.compositions); 
     }); 

     var svg = d3 
       .select(".linechartAgePublicationsComposer") 
       .append("svg") 
       .attr("width", width + margin.left + margin.right) 
       .attr("height", height + margin.top + margin.bottom) 
       .append("g") 
       .attr("transform", 
         "translate(" + margin.left + "," + margin.top + ")"); 

     data.forEach(function(d) { 
      d.age = d.age; 
      d.compositions = +d.compositions; 
     }); 

     x.domain(d3.extent(data, function(d) { 
      return d.age; 
     })); 
     y.domain(d3.extent(data, function(d) { 
      return d.compositions; 
     })); 

     svg.append("g").attr("class", "x axis").attr("transform", 
       "translate(0," + height + ")").call(xAxis); 

     svg.append("g").attr("class", "y axis").call(yAxis).append("text") 
       .attr("transform", "rotate(-90)").attr("y", 6).attr("dy", 
         ".71em").style("text-anchor", "end").text(
         "Compositions"); 

     svg.append("path").datum(data).attr("class", "line") 
       .attr("d", line); 

當我執行它的行超出設定範圍的如圖片和y軸有錯誤的方向。 爲什麼線不在範圍內，僅從9到10？

Answer 1

您應該age屬性轉換爲數字，因爲你與composition屬性做：

data.forEach(function(d) { 
    d.age = +d.age; 
    d.compositions = +d.compositions; 
}); 

Answer 2

的d3.extent將使用自然順序給定數組中返回最小值和最大值。在你的情況下，你不會將字符串轉換爲數字，所以顯然最低的字符串是"10"，最高的字符串是"9"。因此，要解決範圍問題，只需將年齡轉換爲數字，如下例所示。我建議使用parseInt

x.domain(d3.extent(data, function(d) { 
    return parseInt(d.age, 10); 
}));