D3 astackdo cuadro de problemas de conversión de tsv a csv

Estoy tratando de convertir este ejemplo de tsv a csv.

Actualmente esto es lo que tengo: https://jsfiddle.net/asb1926/sc5wdkLe/

El error que sigo recibiendo es este (en el jsfiddle es la línea 46):

d3.v4.min.js:7 Uncaught TypeError: Cannot read property 'length' of undefined at t (d3.v4.min.js:7) at SVGPathElement. (line:61) at SVGPathElement. (d3.v4.min.js:2) at _t._l [as each] (d3.v4.min.js:4) at _t.yl [as attr] (d3.v4.min.js:4) at line:59 at Object. (d3.v4.min.js:7) at _.call (d3.v4.min.js:4) at XMLHttpRequest.e (d3.v4.min.js:7) 

El archivo csv que estoy usando actualmente es este:

 date,Detractors,Promoters,Passives 04/23/12,37,12,46 04/24/12,32,19,42 04/25/12,45,16,44 04/26/12,24,52,64 

Sus cadenas de fecha tienen un formato diferente. Estas son las fechas de Bostock:

 "2015 Jun 15" 

Esto es tuyo:

 "04/23/12" 

Por lo tanto, necesitas un analizador diferente:

 var parseDate = d3.timeParse("%m/%d/%Y"); 

Además de eso, tu ruta d atributo está mal. Debería ser simplemente:

 .attr("d", area); 

Aquí está tu código con el que cambia:

 var svg = d3.select("svg"), margin = { top: 20, right: 20, bottom: 30, left: 50 }, width = svg.attr("width") - margin.left - margin.right, height = svg.attr("height") - margin.top - margin.bottom; var parseDate = d3.timeParse("%m/%d/%Y"); var x = d3.scaleTime().range([0, width]), y = d3.scaleLinear().range([height, 0]), z = d3.scaleOrdinal(d3.schemeCategory10); var stack = d3.stack(); var area = d3.area() .x(function(d, i) { return x(d.data.date); }) .y0(function(d) { return y(d[0]); }) .y1(function(d) { return y(d[1]); }); var g = svg.append("g") .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); var data = d3.csvParse(d3.select("#csv").text(), type) var keys = data.columns.slice(1); x.domain(d3.extent(data, function(d) { return d.date; })); z.domain(keys); stack.keys(keys); var layer = g.selectAll(".layer") .data(stack(data)) .enter().append("g") .attr("class", "layer"); layer.append("path") .attr("class", "area") .style("fill", function(d) { return z(d.key); }) .attr("d", area); layer.filter(function(d) { return d[d.length - 1][1] - d[d.length - 1][0] > 0.01; }) .append("text") .attr("x", width - 6) .attr("y", function(d) { return y((d[d.length - 1][0] + d[d.length - 1][1]) / 2); }) .attr("dy", ".35em") .style("font", "10px sans-serif") .style("text-anchor", "end") .text(function(d) { return d.key; }); g.append("g") .attr("class", "axis axis--x") .attr("transform", "translate(0," + height + ")") .call(d3.axisBottom(x)); g.append("g") .attr("class", "axis axis--y") .call(d3.axisLeft(y).ticks(10, "%")); function type(d, i, columns) { d.date = parseDate(d.date); for (var i = 1, n = columns.length; i < n; ++i) d[columns[i]] = d[columns[i]] / 100; return d; } 
 pre { display: none; } 
   
date,Detractors,Promoters,Passives 04/23/12,37,12,46 04/24/12,32,19,42 04/25/12,45,16,44 04/26/12,24,52,64