d3.jsノードあたりの画像をサポート

Question

私のプライベートサイトにthisグラフを使用して製品の関係を視覚化しています。

ノードが画像であるthis siteが見つかりました。ノードあたりのイメージをサポートするために現在のグラフをどのようにリファクタリングするかを調べようとしています。

すべてのヘルプは

EDITをいただければ幸いです：「イメージ」（とないimg）での問題は、私はその上で、CSSを適用することができないということです。私はtwitterのブートストラップを使用しており、img-circle（ちょうどborder-radius: 50%を追加する）というクラスを追加しようとしていますが、画像では機能しません。両方を試してみました：

var nodeImage = node.append("image") 
      .attr("xlink:href", function (d) { return d.image }) 
      .attr("height", function (d) { return d.height + "" }) 
      .attr("width", function (d) { return d.width + "" }) 
      .attr("x", function (d) {return -0.5 * d.width }) 
      .attr("y", function (d) {return -0.5 * d.height }) 
      .attr("class", "img-circle"); 

と：

var nodeImage = node.append("image") 
     .attr("xlink:href", function (d) { return d.image }) 
     .attr("height", function (d) { return d.height + "" }) 
     .attr("width", function (d) { return d.width + "" }) 
     .attr("x", function (d) {return -0.5 * d.width }) 
     .attr("y", function (d) {return -0.5 * d.height }) 
     .attr("style", "border-radius: 50%;"); 

両方

EDIT2は動作しません：はDONEを！次の行を追加することにより

：あなたのファイルで

.attr("clip-path", function (d) { return "circle(" + (0.48 * Math.max(d.width, d.height)) + "px)"}); 

Answer 1

を、私は以下を参照してください。代わりにrect秒の

graph.nodeRect = graph.node.append('rect') 
    .attr('rx', 5) 
    .attr('ry', 5) 
    .attr('stroke', function(d) { 
     return graph.strokeColor(d.categoryKey); 
    }) 
    .attr('fill', function(d) { 
     return graph.fillColor(d.categoryKey); 
    }) 
    .attr('width' , 120) 
    .attr('height', 30); 

、あなたがimage Sを追加することができます

graph.images = graph.nodes.append('image') 
    .attr('href', function (d) { return d.linkToThePicture }) 
    //.attr('foo', 'bar')... 

データ内の各画像（または相対ファイルパス）へのリンクを保存した方がよいでしょう（どこに格納d.name）。また、タイプ.pngの場合、作者に提供した例で画像を使用していることにも注意してください。

編集：画像の名前をdataと一致させると、さらに作業が少なくなります。

graph.images = graph.nodes.append('image') 
     .attr('href', function (d) { 
      //the replacement takes out spaces 
      return '/images/' + d.name.replace(/ /g, '') + '.png' 
     }) 
     //.attr('foo', 'bar')...