選択範囲内の同じデータを使用して複数の図形を描画しようとしているので、次のようにします。
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]);
});
});
ここで node は「g」要素で、myData は単一のデータ オブジェクトです。私の目標は、myData に基づいて g 内の子シェイプを変更することです。そのため、後で別の myData をバインドしてこの関数を再度呼び出すと、それらを更新できます。しかし、どういうわけか myData は最初に追加された形状にのみバインドされていると思います。同じデータを複数の図形に簡単にバインドする方法はありますか?