이미지로 d3 js 노드

Question

이 http://bl.ocks.org/950642을 사용하여 이미지를 노드에 추가하는 방법을 볼 수 있습니다. 문제는 json 데이터에 따라 노드에 다른 이미지를 추가하는 방법입니다. 예를 들어 값 그룹이 0 인 경우 그 노드에서 하나의 이미지 : 그룹 : 1 노드는 다른 이미지를 가질 것입니다. 나는 노드의 생성이 json에 의해 진행되는 것을 볼 수 있었고 모든 노드에 동일한 클래스를 추가 했으므로 json 데이터에 따라 다른 이미지를 갖도록 변경할 수 있습니다.

Answer 1

상수가 아닌 데이터의 기능으로 "xlink : href"attribute을 정의하십시오. 예를 들어 :

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