4

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

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 中的子形状，因此稍后如果我绑定另一个 myData 并再次调用此函数，它们可以更新。但我相信以某种方式 myData 只绑定到第一个附加的形状。有没有办法轻松地将相同的数据绑定到多个形状？

4

3 回答 3

2

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

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

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

selection.datum([value])...如果value指定，则将元素的绑定数据设置为所有选定元素上的指定值。如果value 是一个常数，所有元素都被赋予相同的数据[原文如此]

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

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

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

于 2014-04-28T00:26:29.507 回答
2

我会创建一个g元素用于输入myData：

groups = d3.select('body').append('svg')
           .selectAll('g').data(myData).enter()
           .append('g');

并将形状分别附加到这些组元素：

groups.append('rect')
groups.append('circle')
于 2013-07-18T18:39:20.880 回答
0
于 2019-05-02T14:59:09.123 回答