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); 
}));