在基于用户选择的折线图中重新呈现路径的问题

issue in re-rendering the path in a line chart based on user selection

本文关键字：折线图 新呈现 问题 路径 选择 于用户 用户      更新时间：2023-09-26

我遇到了一个奇怪的问题。我用按钮创建了两个折线图来控制线条的可见性。在第二个图表中，行可见性的切换工作得很好。但是在第一个图表中，一旦它被渲染，如果我试图切换线条的可见性，它不起作用(所有的线条都消失了)。创建path的代码甚至不会被调用。创建路径的代码是:

var valueline = d3.svg.line()
  .x(function(d) {
    return x(d.date);
  })
  .y(function(d) {
    return y(d.value);
  })
  .interpolate("monotone");
// ...
var lineInstance = g.selectAll(".line-instance")
  .data(filteredData)
  .enter().append("g")
  .attr("class", "line-instance");

lineInstance.append("path")
  .attr("class", "line")
  .attr("d", function(d) {
    //this code is called when second-chart line is toggled
    // but not with first chart
    console.log(d);
    return valueline(d.values)
  })
  .style("stroke", "black");

第一次渲染后，如果我切换第一个图表的任何一条线的可见性，两条线都会永久消失。两张图的代码完全一样。尝试调试，但尚未成功。

在为折线图设置变量时，您在g = svg.append("g").attr(...处忘记了var语句。因此，g变量被添加到window中，而不局限于link函数。因此，折线图指令的第二次实例化会覆盖变量——这导致了奇怪的行为。

这是JSFiddle的固定版本。我建议使用ESLint这样的JavaScript检查器，它会警告你这些错误。

相关文章：