d3js svg中的矩形在路由到AngularJS中的另一个页面后消失

Question

我的 angularjs 应用程序有一个非常奇怪的行为。

1) 我正在使用 d3js 绘制一个漂亮的条形图

graphG.append("rect")
      .attr("id", function (d, i) {
        return "bar_" + i;
      })
      .attr("x", 0)
      .attr("y", 0)
      .attr("height", barHeight - 1)
      .attr("width", function (d, i) {
        return rectWidth(d, i);
      })
      .attr("fill", rectColor);

2) 数据更新后有一个过渡

      barG.select("#bar_" + i)
        .transition()
        .duration(duration)
        .attr("fill", rectColor(d))
        .attr("width", rectWidth(d, i));

到目前为止，宽度转换工作正常。带有渐变的颜色过渡不起作用，但这是另一个问题。它改变了颜色，但没有平滑过渡。

如果我重新路由到另一个页面并返回矩形将不再呈现。 rect在dom中。宽度属性发生了变化。没有吧。

F5 重新加载后一切正常。

还有更奇怪的行为：它发生在 Chrome 中，它在 Firefox 中运行良好。

有人有什么想法吗？

Answer 1

我发现了问题：

错误在于两个指令中的渐变 id（rectColor 函数的返回）相同。所以Chrome中似乎有一些缓存。

在一个指令中重命名渐变 id 可以解决问题。