Probleme beim Zugriff auf max verschachtelter Objektdaten für die Verwendung in einer Domäne in D3

Question

Ich habe csv Daten mit einer Spalte von Jahren und dann Spalten von Altersgruppen mit Raten:

year,15-19,20-24,25-29,... 
1999,0,1.3,8.1,... 
2000,0,1.3,8.3,... 
. 
. 

ich die Daten wie gezeigt abgebildet habe unten. Sobald kartiert die Daten in Form von:

>Array[Object, Object, ...] 

Jedes Objekt ist von der Form:

>id:"age group" 
    values:Array[] 
      >Object 
       >rate: "" 
       >year: "" 

ich Probleme, bin mit dem Maximalwert für die y.domain. Es scheint den Maximalwert von meinem 4. Objekt zu ziehen und dort anzuhalten. Jede Hilfe, die herausfindet, was mit dem Max-Anruf falsch ist, würde geschätzt werden.

var svg = d3.select("svg"), 
    margin = {top: 20, right: 80, bottom: 30, left: 50}, 
    width = svg.attr("width") - margin.left - margin.right, 
    height = svg.attr("height") - margin.top - margin.bottom, 
    g = svg.append("g").attr("transform", "translate(" + margin.left + "," + margin.top + ")"); 

// define scales 
var x = d3.scaleLinear().range([0, width]), 
    y = d3.scaleLinear().range([height, 0]), 
    //define color scale 
    z = d3.scaleOrdinal(d3.schemeCategory10); 

//define line generator 
var line = d3.line() 
    .curve(d3.curveBasis) 
    .x(function(d) { return x(d.year); }) 
    .y(function(d) { return y(d.rate); }); 

//load data 
d3.csv("breaseByageSpread.csv", function(error, data) { 
    if(error) throw error; 

     var ages = data.columns.slice(1).map(function(id) { 
     return { 
      id: id, 
      values: data.map(function(d) { 
       return {year: d.year, rate: d[id]}; 
       }) 
      }; 
     }); 


     //define x axis 
     x.domain(d3.extent(data, function(d) { return d.year; })); 

     //define y axis 
     y.domain([ 
      d3.min(ages, function(c) { return d3.min(c.values, function(d) { return d.rate; }); }), 
      d3.max(ages, function(c) { return d3.max(c.values, function(d) { return d.rate; }); }) 
     ]); 


     // define color scale 
     z.domain(ages.map(function(c) { return c.id; })); 

     //append x axis 
     g.append("g") 
      .attr("class", "axis axis--x") 
      .attr("transform", "translate(0," + height + ")") 
      .call(d3.axisBottom(x) 
      .ticks(15) 
      .tickFormat(d3.format('d'))); 

     //append y axis 
     g.append("g") 
      .attr("class", "axis axis--y") 
      .call(d3.axisLeft(y)) 
      .append("text") 
       .attr("transform", "rotate(-90)") 
       .attr("y", -50) 
       .attr('x', -125) 
       .attr("dy", "0.71em") 
       .attr("fill", "#000") 
       .text("Rate per 100,000 ppl"); 

     //append rate data to svg 
     var rate = g.selectAll(".rate") 
      .data(ages) 
      .enter().append("g") 
       .attr("class", "age"); 

     //append rate path to svg 
     rate.append("path") 
      .attr("class", "line") 
      .attr("d", function(d) { return line(d.values); }) 
      .style("stroke", function(d) { return z(d.id); }); 

      rate.append("text") 
       .datum(function(d) { return {id: d.id, value: d.values[d.values.length - 1]}; }) 
       .attr("transform", function(d) { return "translate(" + x(d.value.year) + "," + y(d.value.rate) + ")"; }) 
       .attr("x", 3) 
       .attr("dy", "0.35em") 
       .style("font", "10px sans-serif") 
       .text(function(d) { return d.id; }); 


     function type(d, _, columns) { 
      //d.date = parseTime(d.date); 
      for (var i = 1, n = columns.length, c; i < n; ++i) d[c = columns[i]] = +d[c]; 
      return d; 

     }; 
    }); 

Answer 1

Ich habe das Problem gefunden. Die Tarifdaten kamen als Strings. So wandeln es in einen numerischen änderte ich den folgenden Code, wenn die Daten geladen werden:

Alt:

values: data.map(function(d) { 
       return {year: d.year, rate: d[id]}; 

Neu:

values: data.map(function(d) { 
       return {year: d.year, rate: +d[id]};