javascript - d3.js 力图

Question

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

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

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

    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

如果您不要求将图像剪裁到圆之外(我不确定这是否是您想要的)，您可以定义一组新元素:

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 + ")";
    });
}