Question

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

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");

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

Here is the JSFiddle.

Answer 1

设置折线图的变量时，您忘记了var处的g = svg.append("g").attr(...声明。因此，g变量已添加到window，而不是作用于link函数。因此，折线图指令的第二个实例化会覆盖变量 - 这会导致这种奇怪的行为。

这是一个fixed version of your JSFiddle。我建议使用像ESLint这样的JavaScript linter来警告你这些错误。

根据用户选择在折线图中重新渲染路径时出现问题

1 个答案: