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多个错误读：

错误：属性d：预期数字，＆＃34; 12342542342352452，Nan＆＃34;。

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

我不知道该怎么做，因为点击几下按钮就会导致日志出现100多个错误。我不认为这对于浏览器的稳定性有好处，但另一方面，图表似乎可以正常工作。

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

请，请让错误消失。

我在这里有一个非常小的例子：

https://plnkr.co/edit/Zq9Yd6Hf7mlTlegMXiIG

预感

我还认为它可能是xAxis本身。但我过去了 d3.extent(data, function(d) {return 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和你的假设......

也许这不是处理更新功能的最优雅方式。

是的，这肯定不是最好的方式。有一个更好的方法：着名的 enter-update-exit 模式！摆脱那个尴尬的反击和if...else陈述！

转换过程中的D3持续路径d预期数字错误

1 个答案: