javascript - D3 Persistent Path d expected number error 在过渡期间

Question

对于这篇冗长的帖子，我深表歉意，但我只是想分享到目前为止我所解决的所有问题和取得的进展。此错误已持续一个多星期。

我有一个折线图，辅以代表三天数据的三个按钮。我将按钮映射到三个 .txt 文件和一个 d3 事件监听器:

var fileMap = {
  'Day 1':'2018-05-17.txt',
  'Day 2':'2018-05-18.txt',
  'Day 3':'2018-05-19.txt'
}

d3.selectAll('.button').on('click', function(d) {
  var dayValue = this.innerHTML;
  var thisFile = fileMap[dayValue];
  createChart(thisFile);
});

所以这个想法是您可以单击按钮，图表将自行更新。在执行 .transition() 调用时，我一直遇到麻烦。我最终使用了这个，它有效:

在调用主 createGraph 函数之前，我有一个变量来计算我们创建图形的次数:

var graphCount = 0;

然后在 createGraph 函数的范围内我有一个计数器:

graphCount +=1;

然后我有了绘制图形(初始状态)或简单转换(如果已经绘制)所需的逻辑:

if (graphCount>1) {

        xScale.domain(d3.extent(data, function(d) {return (d.date)}));
        yScale.domain(d3.extent(data, function(d) {return (d.y2)}));

        d3.selectAll(".line")
          .data([data])
          .transition()   // change the line
          .duration(750)
          .attr("d", graphLine);

        d3.selectAll("g.y.axis").transition() // change the y axis
            .duration(750)
            .call(yAxis);
} else {
  svg.append('path')
      .attr('transform', 'translate(' + margins.left + ',' + margins.top + ')')
      .datum(data)
      .attr('class', 'line')
      .attr('d', graphLine);


  var yAxisNodes = svg.append('g')
      .attr('class', 'y axis')
      .attr('transform', 'translate(' + margins.left + ',' + margins.top + ')')
      .call(yAxis);
}

也许这不是处理更新功能的最优雅的方式。我承认这看起来有点粗糙，但至少它确实有效。

危险信号:

X 轴:首先，x 轴在我的图表中不可见，但这是设计使然。我有一个显示 x 轴值的工具提示，但为了简单起见，我省略了工具提示。

X 轴是时间维度，.txt 使用 unix 时间，我使用 new Date(((split[0]*300)+rawTime)*1000 进行转换)。这意味着我所有的 d.dates 都是完整的日期，而不是小时:分钟(正如我最初想要的那样)。这是一个示例切片:

data[0]->Object->date: Thu May 17 2018 09:35:00 …. 

我也有一些 timeFormat 变量，但奇怪的是，当我尝试调用 d3.time.format("%H:%M") 时，图表是'绘制。所以在我的代码中它们没有被调用。因为我不需要可见的 x 轴，所以我放弃了。当我不使用 timeFormat 并使用来自 new Date() 的完整日期时，图表工作正常。

问题:每当单击一个按钮时，图表都会成功更新——新数据会从相应的 .txt 中读取，但由于某种原因我已经过了40 个错误阅读:

Error: attribute d: Expected number, "12342542342352452, Nan".

这没有意义，因为图表绘制得很好。如前所述，unix 日期已全部成功解析为 javascript 日期对象。为了安全起见，我将数据传递到控制台进行检查，是的，似乎没有解析错误。所有日期和所有 y 轴值都在那里。

我不确定该怎么做，因为点击几下按钮就会导致日志显示 100 多个错误。我不认为这对浏览器的稳定性有好处，但另一方面，图表似乎工作得很好。

问题:为什么我在日志中收到 40 多个错误？我的数据集大约有 80 个观察值。我注意到它只会在转换期间抛出错误。初始图形创建没有任何错误。

拜托，请让错误消失吧。

我这里有一个非常简单的例子:

https://plnkr.co/edit/Zq9Yd6Hf7mlTlegMXiIG

预感

我还认为它可能是 xAxis 本身。但是我通过了 d3.extent(data, function(d) {返回 d.date 进入控制台日志，然后再次检查所有内容。很奇怪。

Answer 1

错误只是由于 txt 文件中的最后一行为空，在数组中为您提供了这样的最后一个对象:

{y2: NaN, date: Wed May 16 2018 23:35:00}

当然，使用 NaN 不会有任何结果。

解决方案:删除那些空行。之后，您的数组具有正确数量的对象(在您链接的运行代码中为 77 对 78)

这是更新的 Plunker:https://plnkr.co/edit/XdOcqsdCG3kXw8cvja9y?p=preview

---

PS:关于 graphCount 和你的假设......

Maybe it's not the most elegant way to handle update functionality.

是的，这当然不是最好的方法。有一个更好的方法:著名的 enter-update-exit 模式!去掉那个笨拙的计数器和 if...else 语句!