d3js可重用的图表组件和转换

Question

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

例如，我已将此 plunker 作为我的问题。在这个例子中，我使用迈克的timeSeriesChart function然后只是改变宽度或高度。通过在选择图表时使用转换运算符，然后调用timeSeriesChart函数以查看宽度转换为其新值。但是，宽度/高度会立即改变，只有轴平滑过渡到新的长度。

如果在更新组件内部的宽度时添加.transition().duration(x)，宽度会平滑更新，但我不想让组件与转换操作符混乱，我认为它应该可以在外部执行。它当然似乎适用于轴。

我错过了什么？

要查看代码，请转到 plunker

Answer 1

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

我已将此应用于您的弹药here。您需要做的就是替换

g.select(".area")

与

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

并且类似于该行。