d3.js力图

Question

我正在研究d3.js力图应用程序。我很想知道如何用图像替换中央蓝色圆圈。有一个图像网址填充圆圈的背景 - 所以有一个圆形图片？

http://jsfiddle.net/LsMZp/1/

所以不用填充 - 是否可以只使用背景网址？

    var circle = svg.append("svg:g").selectAll("circle").data(force.nodes()).enter().append("svg:circle").attr("r", function(d) {
        return getRadius(d);
    }).style("fill", function(d) {
        return color(d.group);
    }).call(force.drag);

Answer 1

您可以通过定义模式来实现：

<svg>
  <defs>
  <pattern id="img1" patternUnits="userSpaceOnUse" width="100" height="100">
    <image xlink:href="http://www.telascupece.com.br/image/chapa_perfurada.jpg" x="0" y="0" width="100" height="100" />
  </pattern>
  </defs>
</svg>

然后在你的圈子填充中使用它：

var circle = svg.append("svg:g")
  .selectAll("circle")
  .data(force.nodes())
  .enter()
  .append("svg:circle")
  .attr("r", function(d) {
    return getRadius(d);
  })
  .style("fill", function(d) {
    return "url(#img1)";
  })
  .call(force.drag);

请参阅更新示例：http://jsfiddle.net/LsMZp/2/

Answer 2

如果您不要求将图像剪切到圆圈之外（我不确定这是否是您想要的），您可以定义一组新的元素：

var image = svg.selectAll(".image");
// Bind to data
image = image.data(force.nodes());
image.enter().append("image")
 .attr("xlink:href", "<url to your image here>")
 .attr("class", "image");

然后在tick函数

中

function tick() {
    link.attr("x1", function(d) {return d.source.x;})
        .attr("y1", function(d) {return d.source.y;})
        .attr("x2", function(d) {return d.target.x;})
        .attr("y2", function(d) {return d.target.y;});
    node.attr("cx", function(d) {return d.x})
        .attr("cy", function(d) {return d.y});
    image.attr("transform", function(d) {
        return "translate(" + d.x + "," + d.y + ")";
    });
}