d3 js làm hình ảnh

Question

sử dụng http://bl.ocks.org/950642 chúng ta có thể xem cách thêm hình ảnh vào nút, câu hỏi bây giờ là cách thêm hình ảnh khác nhau trên các nút tùy thuộc vào dữ liệu json, ví dụ như nó có nhóm giá trị: 0 một hình ảnh trên nút đó, nơi nhóm: 1 nút sẽ có một hình ảnh khác. như tôi có thể thấy việc tạo ra các nút đi bởi các json và nó thêm cùng một lớp cho tất cả các nút để cách này có thể được thay đổi để có hình ảnh khác nhau tùy thuộc vào dữ liệu json.

Answer 1

Xác định "xlink: href" attribute làm hàm của dữ liệu thay vì hằng số. Ví dụ:

// 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

Đó là một câu hỏi cũ nhưng bạn có thể thêm hình ảnh khác nhau được định nghĩa bởi JSON bản thân:

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