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

Question

我想知道如何创建 d3js 绑定来简化动画。我尝试使用类似于 TikZ 坐标的动态版本的东西，您只需定义一个 2d 坐标并引用它来定位元素。在这里，我只想定义一个对象 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;}]);

我想为 line 的 x1, x2 属性、dot 的 cx1 属性和 [=19= 的 cy1 属性设置动画] 当我打电话给 test.setValue(30); 时。

基本上我认为它应该像

// on value changes
this.setValue = function(x){  
    // update the value itself
    this.v = x;
    // update each binded-object
    for(var i=0;i<this.entry.length;i++){
        var bindObject = this.entry[i];
        // update each binded-attribute of this object
        for(var j=0;j<bindObject.property.length;j++){

            // how to update? 
            // identify
            var modifier = function(x){return x;};
            // or a custom function ?
            if(typeof bindObject.function[j] !== "undefined"){
                modifier = bindObject.function[j];
            }

            var to = modifier(x);
            var attrName = bindObject.property[j];

            // update
            bindObject.handle
              .transition()
              .duration(2000)
              .attr(attrName, to);

        }

    }
};

我的主要想法是为此值使用一个包装器，它知道必须更改哪些 svg 属性。

我想使用

// bind some svg elements
var test = new d3jsbinding();
test.addBinding(line,["x1","x2"],[]);
test.addBinding(dot,["cx1"],[]);
test.addBinding(dot2,["cx1"],[function(v){return 2*v;}]);

// update them (at the same time)
test.setValue(30);

不幸的是，我发现无法在调用 .transition().duration(2000)

之前将属性更新排队（或更好地分配每个属性的新值）

Answer 1

看看我的bl.ocks

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

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

免责声明：

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

What is the correct way of writing a binding for D3.js animations?

javascript

svg

transitions

d3.js