D3 js узлы как изображения

используя этот http://bl.ocks.org/950642, мы можем видеть, как добавлять изображения к узлам, теперь вопрос заключается в том, как добавлять разные изображения на узлах в зависимости от на данные json, например, если у него есть группа значений: 0, чтобы иметь одно изображение на этом node, где группа: 1 node будет иметь другое изображение. так как я мог видеть, что создание узлов происходит через json, и он добавляет один и тот же класс ко всем узлам, и поэтому он может быть изменен, чтобы иметь разные изображения в зависимости от данных json.

Ответ 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];
});

Ответ 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 });