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]);
    });
});

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

4

3 に答える 3