javascript - d3js 可重用图表组件和转换

Question

我正在尝试使用 Mike Bostock 在 this article 中描述的可重用组件方法创建图表.然而，我遇到在组件外部的选择上调用 .transition() 不会导致我预期的属性发生转换。

例如我做了这个 plunker 这证明了我的问题。在此示例中，我使用 Mike 的 timeSeriesChart function然后简单地改变宽度或高度。通过在选择的图表上使用转换运算符，我然后调用 timeSeriesChart 函数来查看宽度转换为其新值。但是，宽度/高度会立即发生变化，只有轴平滑地过渡到新的长度。

如果我在更新组件内部的宽度时添加 .transition().duration(x) ，宽度会平滑更新，但我不想让转换运算符使组件困惑，并且我认为在外面也应该这样做。它似乎确实适用于轴。

我错过了什么？

要查看代码，请转到 plunker

Answer 1

如果您查看 source of the axis component ，您会看到所有元素选择器都包含在 d3.transition() 中。这就是使过渡透明发生的原因。

我已经将它应用到你的 plunker here .您需要做的就是更换

g.select(".area")

与

d3.transition(g.select(".area"))

这条线也是如此。