Question

我想知道如何创建一个d3js绑定来简化动画。我试图使用类似于TikZ坐标的动态版本的东西，在那里你只需定义一个二维坐标并引用它来定位元素。在这里，我只想定义一个对象M，它封装一个值和一些绑定到对象属性，例如，圆的半径，x位置，y位置，.... M值的每次更改都应该在相同的时间为附加对象的对象属性设置动画。

我创建了一个jsFiddle： http://jsfiddle.net/66qxjze9/1/

在这个例子中：

test.addBinding(line,["x1","x2"],[]);
test.addBinding(dot,["cx1"],[]);
test.addBinding(dot2,["cy1"],[function(v){return 2*v;}]);

我想为x1, x2的{{1}}属性，line的{{1}}属性和cx1的{{1}}设置动画。我打电话给dot。

基本上我认为它应该像

一样工作

cy1

我的主要想法是使用这个值的包装器来知道必须更改哪些svg属性。

我想用

dot2

不幸的是，在调用test.setValue(30);

之前，我找不到将属性更新排队（或更好地分配每个属性的新值）的方法

Answer 1

查看我的bl.ocks

基本上，您需要将循环写入：

d3.transition()
            .duration(parent.duration)
            .ease(parent.ease)
            .each(function() {
... HERE ...
});

免责声明：

为D3.js动画编写绑定的正确方法是什么？

1 个答案: