d3.js支持每個節點的圖像

Question

我在我的私人網站中使用this圖形來顯示產品關係，它效果很好。

我發現this site節點爲圖像。試圖找出如何重構我當前的圖形以支持每個節點的圖像。

任何幫助，將不勝感激

編輯：與「形象」（而不是img）的問題是，我不能對應用CSS。我使用twitter bootstrap並試圖添加名爲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

在你的文件，我看到：

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

取而代之的是rect S的，可以追加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')...