d3.js - 画像としてのd3jsノード

Question

このhttp://bl.ocks.org/950642を使用して、ノードに画像を追加する方法を確認できます。問題は、jsonデータに応じて、ノードに異なる画像を追加する方法です。たとえば、値グループが0の場合などです。そのノードに1つのイメージがあり、group：1ノードには別のイメージがあります。ノードの作成はjsonによって行われ、すべてのノードに同じクラスが追加されることがわかりました。これにより、jsonデータに応じて異なるイメージを持つように変更できます。

Answer 1

「xlink:href」属性を、定数ではなくデータの関数として定義します。例えば：

// A map from group ID to image URL.
var imageByGroup = {
  "0": "red.png",
  "1": "green.png"
};

// Set the xlink:href attribute dynamically by looking up the URL.
image.attr("xlink:href", function(d) {
  return imageByGroup[d.group];
});

Answer 2

これは古い質問ですが、JSON 自体で定義されたさまざまな画像を追加できます。

//Include info in JSON
"nodes":[
    {"name":"Zapata","group":1,"imagen":"changa.png"},
    {"name":"Villa","group":1,"imagen":"poeta.png"},
    [...]

//Add some function like this
function imagen(d) { return d.imagen; }

//Or add it to node image attribute
image.attr("xlink:href", function(d) { return d.imagen });