data-binding - D3 - 如何将相同的数据绑定(bind)到多个对象？

Question

我正在尝试使用选择中的相同数据绘制多个形状，所以假设我有:

myData = [
    { 
        shape: 'rect',
        attr: { width: 100, height: 100, x: 100, y:100 }
    } , {
        shape: 'circle',
        attr: {cx, cy, etc...}
    }
]

node.selectAll('*').data([myData]);

myData.obj.forEach(function(obj) {
    // Append different shapes based on data
    var shape = node.enter().append(obj.shape);
    Object.keys(obj.attrs).forEach(function(attr) {
        // Bind attrs to shapes based on data
        shape.attr(attr, obj.attrs[attr]);
    });
});

这里的节点是一个“g”元素，myData 是一个单一的数据对象。我的目标是根据 myData 修改 g 中的子形状，所以以后如果我绑定(bind)另一个 myData 并再次调用此函数，它们可以更新。但我相信以某种方式 myData 只绑定(bind)到第一个附加的形状。有没有办法轻松地将相同的数据绑定(bind)到多个形状？

Answer 1

也许，你想要的是 .datum() d3 中的函数。它的一个特定用例是将相同的数据绑定(bind)到多个 DOM 元素(即将一个数据绑定(bind)到整个 d3 选择)。

例如，d3.selectAll('div').datum({foo: 'bar'})将绑定(bind)同一个对象 {foo: 'bar'}致所有<div>...</div>当前存在于文档中的元素。

直接引用 https://github.com/mbostock/d3/wiki/Selections#datum

selection.datum([value])...If value is specified, sets the element's bound data to the specified value on all selected elements. If value is a constant, all elements are given the same data [sic]

(有点讽刺的是，他在 .datum() 函数的解释中将常量数据称为“数据”!)

但是，这是对您问题的字面回答；您的问题可能有一个更加面向设计的答案，这可能解释了处理您的整体目标的“传统”d3方式......在这种情况下，您可能应该查阅一些教程，例如

http://mbostock.github.io/d3/tutorial/circle.html