Question

我在D3中为瀑布图创建了一个Angular指令，并希望在值更新后立即更新图表。我已经把范围。$ watch和我可以看到新指令的数据。但是我创建的paintChart（）函数用新数据重新渲染图表似乎无法正常工作。

即使我能够接收不同的数据数组，我也无法使用不同的数据重新绘制图表。我试图将图表和条形变量定义放在paint方法之外，并使用不同的参数重新使用它们，但没有成功。就像我将以下代码放在paintChart（）函数中一样：

var chart = d3.select(rawSvg[0])
  .attr("width", width + margin.left + margin.right)
  .attr("height", height + margin.top + margin.bottom)
  .append("g")
  .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

该功能停止工作。

Here is the Fiddle.。数据在选择上发生了很大的变化，但我很难在更改数据时正确地重新绘制图表。

UPDATE：我将以下代码作为paintChart（）函数的第一行，在创建图表之前删除以前的SVG及其相关元素：

var svg = d3.select("svg");
svg.selectAll("*").remove();

现在，当选择不同的数据时，图表会成功更新。但还有更多问题：

当我选择不同的数据来更新图表并重新选择以前选择的数据时，瀑布图表的最后一列会消失并显示NaN。最后一列显示第一次加载时没有错误。仅在切换数据时，才会发生此错误。您可以通过从选择框中选择不同的数据然后重新选择以前选择的数据来重现此错误。这似乎是一个非常奇怪的问题。
在我看来，不正确的方法是删除SVG及其关联的组/元素，并在每次有新数据时呈现全新的图表。

无法使用Angular重绘D3js中的瀑布图

0 个答案: