2011-09-05 10 views
11

d3a demo of a Force-Directed Graph Layoutである。d3-jsのForce-Directed Layoutはイメージをノードとしてサポートしていますか?

円の代わりに、グラフ内のすべてのノードを画像にする必要があります。

ので、私は

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

.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); 

を変更しかし、私はすべての画像を見ることができません。私は間違って何をしていますか?ここで

答えて

18
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

+1

あなたは、円ノード内のサークルのイメージとしてRECTイメージを作成する方法を知っているために起こるのですか?あなたの与えられた例は、その中に円と矩形のイメージを表示します。ありがとう。 – derek

+0

@derek、border-radius:100%; CSSスタイル? – andreybavt

+0

border-radiusはsvg:imageでは機能しませんが、希望があります:http://stackoverflow.com/questions/7430580/setting-rounded-corners-for-svgimage – fredw

関連する問題