d3.js диаграмма линии больше, чем диапазон

Question

I`m использованием 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); 
}));