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