Question

我最初遵循一个简单的线条示例来绘制d3.js（https://bl.ocks.org/d3noob/402dd382a51a4f6eea487f9a35566de0）中的一条线。

我的真实世界需要操纵一些原始数据，因此我添加了一个nest（）和一个汇总（）来汇总每天的收盘数。即在07年5月，图表行应显示400而不是100.

根据以下代码和tsv文件：

我在控制台中收到了正确的信息，即07年5月的400。
我无法在图表上获得400号码。相反，我总是得到100。

根据我的研究，我的感觉是d3.line函数正在读取“数据”信息而不是嵌套/ rolledup“groupByDate”信息（不是读取“值”而是“关闭”）。当我尝试改变事物时，我收到一条消息： d3.v4.min.js:2 Error: <path> attribute d: Expected number, "MNaN,450LNaN,447L…"

我在这个网站上搜索了很多答案并改变了我的d3.line函数以包含groupByDate信息，但似乎是错误的方式。我只需要在第07天跳转到400，就像在控制台一样。

    <!DOCTYPE html>
<svg width="960" height="500"></svg>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script>

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,
    g = svg.append("g").attr("transform", "translate(" + margin.left + "," + margin.top + ")");

var parseTime = d3.timeParse("%d-%b-%y");

var x = d3.scaleTime()
    .rangeRound([0, width]);

var y = d3.scaleLinear()
    .rangeRound([height, 0]);

var vline = d3.line()
    .x(function(d) { return x(d.date); })
    .y(function(d) { return y(+d.close); });

d3.tsv("data.tsv", function(d) {
  d.date = parseTime(d.date);
  d.close = +d.close;
  return d;
}, function(data) {
  var groupByDate = d3.nest()
    .key(function(d) { return d.date; })
    .rollup(function(d) { return d3.sum(d, function(g) { return +g.close; }); })
    .entries(data);

    groupByDate.forEach(function(d) {
         d.date = d.key;
         d.close = +d.close;
         d.close = d.value;
        });

    console.log(groupByDate);


  x.domain(d3.extent(data, function(d) { return d.date; }));
  y.domain(d3.extent(groupByDate, function(d) { return d.value; }));

  g.append("g")
      .attr("transform", "translate(0," + height + ")")
      .call(d3.axisBottom(x))
    .select(".domain")
      .remove();

  g.append("g")
      .call(d3.axisLeft(y))
    .append("text")
      .attr("fill", "#000")
      .attr("transform", "rotate(-90)")
      .attr("y", 6)
      .attr("dy", "0.71em")
      .attr("text-anchor", "end")
      .text("Price ($)");

  g.append("path")
      .datum(data)
      .attr("fill", "none")
      .attr("stroke", "steelblue")
      .attr("stroke-linejoin", "round")
      .attr("stroke-linecap", "round")
      .attr("stroke-width", 1.5)
      .attr("d", vline);
});

</script>

data.tsv

date    close
24-Apr-07   93.24
25-Apr-07   95.35
26-Apr-07   98.84
27-Apr-07   99.92
30-Apr-07   99.80
1-May-07    99.47
2-May-07    100.39
3-May-07    100.40
4-May-07    100.81
7-May-07    100.00
7-May-07    100.00
7-May-07    100.00
7-May-07    100.00
8-May-07    105.06
9-May-07    106.88
10-May-07   107.34
11-May-07   108.74
14-May-07   109.36
15-May-07   107.52
16-May-07   107.34

Answer 1

您应该将groupByData而不是data传递到您的路径。但是，之所以不起作用的原因是nest.key必须是一个字符串，所以它将你的时间解析回一个字符串然后不能使用你的x规模。我建议从行转换中删除parseTime，然后将其添加到x缩放域和vline x函数中（虽然这意味着将它放在两个位置，所以也许更好的方式。） ..）。

您的x缩放域将变为：

x.domain(d3.extent(data, function(d) { return parseTime(d.date); }));

vline将成为：

var vline = d3.line() .x(function(d) { return x(parseTime(d.date)); })...

d3v4.js - d3.line没有绘制正确的值

1 个答案: