Javascript d3v4.js-d3.line未绘制正确的值_Javascript_D3.js

Javascript d3v4.js-d3.line未绘制正确的值

javascript d3.js

Javascript d3v4.js-d3.line未绘制正确的值,javascript,d3.js,Javascript,D3.js,最初，我按照一个简单的直线示例在d3.js（）中绘制一条直线我的现实世界需要对原始数据进行一些操作，因此我添加了一个nest（）和一个rollup（）来计算每天的收盘价。也就是说，在2007年5月，图表线应该显示400而不是100 根据以下代码和tsv文件：我在控制台中获得了正确的信息，即2007年5月400日我在图表上找不到400这个数字。相反，我总是得到100分根据我的研究，我的感觉是d3.line函数正在读取“数据”信息，而不是嵌套/滚动的“groupByDate”信息（不是读

最初，我按照一个简单的直线示例在d3.js（）中绘制一条直线

我的现实世界需要对原始数据进行一些操作，因此我添加了一个nest（）和一个rollup（）来计算每天的收盘价。也就是说，在2007年5月，图表线应该显示400而不是100

根据以下代码和tsv文件：

我在控制台中获得了正确的信息，即2007年5月400日
我在图表上找不到400这个数字。相反，我总是得到100分

根据我的研究，我的感觉是d3.line函数正在读取“数据”信息，而不是嵌套/滚动的“groupByDate”信息（不是读取“值”，而是“关闭”）。当我试图改变事情时，我得到一个信息：

d3.v4.min.js:2错误：属性d：预期数字，“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>

您应该将

groupByData

而不是

data

传递到您的路径。但这样做不起作用的原因是，

nest.key

必须是一个字符串，因此它将时间解析回一个字符串，而这个字符串将无法与x刻度一起工作。我建议从行转换中删除

parseTime

，而是将其添加到x scale域和vline x函数中（尽管这意味着将其放在两个位置，因此可能有更好的方法…）

您的x比例域将成为：

x.domain（d3.extent（数据，函数（d）{return parseTime（d.date）；}）
而vline将成为：
var vline=d3.line（）
.x（函数（d）{return x（parseTime（d.date））；}）..
您正在传递路径数据中的数据，而不是分组数据。非常感谢Emma和Ryan！这两项更改都使该行跃至400.：）非常感谢Emma和Ryan！这两项更改都使该行跃至400.：）
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