d3-js的力定向佈局是否支持圖像作爲節點？

d3有a demo of a Force-Directed Graph Layout。d3-js的力定向佈局是否支持圖像作爲節點？

而不是圓圈，我想圖中的所有節點都是圖像。

所以，我改變

.append("svg:circle") 
     .attr("class", "node") 
     .attr("cx", function(d) { return d.x; }) 
     .attr("cy", function(d) { return d.y; }) 
     .attr("r", 5) 
     .style("fill", function(d) { return fill(d.group); }) 
     .call(force.drag);

到

.append("xhtml:img") 
    .attr("src", "http://a577.phobos.apple.com/us/r1000/081/Purple/12/61/13/mzi.lgqdzwfu.png") 
    .call(force.drag);

但我看不到任何圖像。我究竟做錯了什麼？

來源

2011-09-05 Tinyfool

node.append("svg:image") 
    .attr("class", "circle") 
    .attr("xlink:href", "https://d3nwyuy0nl342s.cloudfront.net/images/icons/public.png") 
    .attr("x", "-8px") 
    .attr("y", "-8px") 
    .attr("width", "16px") 
    .attr("height", "16px");

下面是使用圖像爲節點的例子：http://bl.ocks.org/950642

來源

2011-09-05 11:29:16

你碰巧知道如何使矩形圖像爲圓節點內部的圓形圖像？您給出的示例將在其中顯示一個圓圈和一個矩形圖片。謝謝。 – derek

@derek，邊界半徑如何：100％; CSS風格？ – andreybavt

border-radius在svg：image上不起作用，但有希望：http://stackoverflow.com/questions/7430580/setting-rounded-corners-for-svgimage – fredw

d3-js的力定向佈局是否支持圖像作爲節點？

回答

相關問題