D3堆积面积图tsv到csv转换问题

Question

我正在尝试将 this example 从 tsv 转换为 csv。

目前这是我拥有的：https://jsfiddle.net/asb1926/sc5wdkLe/

我不断收到的错误是这样的（在 jsfiddle 上是第 46 行）：

d3.v4.min.js:7 Uncaught TypeError: Cannot read property 'length' of undefined
at t (d3.v4.min.js:7)
at SVGPathElement.<anonymous> (line:61)
at SVGPathElement.<anonymous> (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.<anonymous> (d3.v4.min.js:7)
at _.call (d3.v4.min.js:4)
at XMLHttpRequest.e (d3.v4.min.js:7)

​我目前使用的csv文件是这样的：

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

Answer 1

您的日期字符串有不同的格式。这是 Bostock 的日期：

"2015 Jun 15"

这是你的：

"04/23/12"

因此，您需要一个不同的解析器：

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

除此之外，您的路径d 属性是错误的。应该很简单：

.attr("d", area);

这是您的代码进行了更改：

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

<script src="https://d3js.org/d3.v4.min.js"></script>
<svg width="500" height="300"></svg>
<pre id="csv">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</pre>

PS：我正在使用<pre> 元素来存储 CSV，因为我无法在 Stack sn-p 中使用真正的 CSV。