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

我想知道如何创建d3js绑定来简化动画。我试图使用类似于TikZ坐标的动态版本的东西，您只需定义一个2d坐标并参考它来定位元素。这里我只想定义一个对象M，它封装了一个值和一些对象属性的绑定，例如圆半径、x位置、y位置等等。M值的每次更改都应同时设置附着对象的对象属性的动画

我创建了一个JSFIDLE：

在本例中：

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

当我调用

test.setValue（30）时，我想为
line
的
x1、x2
属性、
dot
的
cx1
属性和
dot2的
cy1
设置动画

基本上我认为它应该像这样工作

// 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);

        }

    }
};

不幸的是，在调用
.transition（）之前，我没有办法将属性更新排队（或者更好地分配每个属性的新值）。duration（2000）
看看我的

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

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

免责声明：
这看起来像是使用d3输入更新删除的情况。如果我理解正确，您希望根据添加的绑定更新给定的元素，但是更新应该以线性转换的方式进行动画。“输入更新删除”只需将其推到新位置，无需动画。
d3.transition()
            .duration(parent.duration)
            .ease(parent.ease)
            .each(function() {
... HERE ...
});