d3js可重用图表组件和过渡

瑞典人

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

例如,我制造了这个小矮人,这证明了我的问题。在此示例中,我使用Mike的timeSeriesChart函数,然后简单地更改宽度或高度。通过对图表的选择使用过渡运算符,然后调用该timeSeriesChart函数以查看宽度变换为其新值的情况。但是,宽度/高度会立即变化,只有轴才能平滑过渡到其新长度。

如果我.transition().duration(x)在更新组件内部的宽度时添加了宽度,平滑地更新了宽度,但是我不想用过渡运算符使组件混乱,并且我认为它也应该在外部执行。它似乎确实适用于轴。

我想念什么?

要查看代码,请转到插棒

拉尔斯·科特霍夫(Lars Kotthoff)

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

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

g.select(".area")

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

和类似的线。

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

d3js可重用图表组件和过渡

来自分类Dev

为什么在 d3.js 可重用图表创建问题上单击事件?

来自分类Dev

可重用的d3.js组件和继承

来自分类Dev

使用d3js根据用户选择调用备用图表绘制功能

来自分类Dev

d3js图表过渡无法正常运行

来自分类Dev

D3JS缩放和过渡性能

来自分类Dev

d3js 图表点和区域未更新

来自分类Dev

d3js删除元素的过渡

来自分类Dev

d3js中的过渡功能

来自分类Dev

图表之间的D3.js过渡

来自分类Dev

D3JS折线图在折线之间的过渡

来自分类Dev

流星:使用图表分区重用模板

来自分类Dev

React JS:可重用组件

来自分类Dev

跨多个小型图表d3js的链接线

来自分类Dev

d3JS图表无法正确渲染

来自分类Dev

防止D3js Sankey图表中出现循环

来自分类Dev

跨多个小型图表d3js的链接线

来自分类Dev

d3js 在多个图表之间切换

来自分类Dev

如何在D3js强制有向图中为节点实现突出显示和过渡效果?

来自分类Dev

D3JS的选择和类

来自分类Dev

如何使用图表js显示图表

来自分类Dev

D3js:拖动滑块可触摸

来自分类Dev

如何制作可重用的vue js组件?

来自分类Dev

什么是React JS可重用组件?

来自分类Dev

在VBA中命名和引用图表

来自分类Dev

试图了解javascript d3js框架中的过渡方法?

来自分类Dev

D3js可折叠树使用深度优先样式进入过渡

来自分类Dev

试图了解javascript d3js框架中的过渡方法?

来自分类Dev

d3js:从同一CSV调用不同的数据-过渡