d3js可重用图表组件和过渡

Question

我正在尝试使用Mike Bostock在本文中描述的可重用组件方法来创建图形。 但是，我遇到了在组件外部的选择上调用.transition()不会导致我期望的属性发生转变的情况。

例如，我制作了这个小矮人 ，这说明了我的问题。 在此示例中，我使用Mike的timeSeriesChart函数 ，然后仅更改宽度或高度。 通过在所选图表上使用过渡运算符，然后调用timeSeriesChart函数以查看宽度转换为其新值的过程。 但是，宽度/高度会立即变化，只有轴才能平滑过渡到新的长度。

如果在更新组件内部的宽度时添加.transition().duration(x) ，则宽度可以平滑更新，但我不想用过渡运算符使组件混乱，我认为它应该可以在外部进行操作好。 它似乎确实适用于轴。

我想念什么？

要查看代码，请转到插棒

Answer 1

如果查看轴组件的源代码 ，则会看到所有元素选择器都包装在d3.transition() 。 这就是使过渡透明发生的原因。

我已经在这里将它应用于您的pl废者。 您需要做的就是更换

g.select(".area")

同

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

和类似的线。