用图像替换d3.js符号

时间:2013-07-31 17:21:44

标签: javascript d3.js nvd3.js

参考此小提琴example

我需要用图像替换符号......或者可能首先用单个图像替换..例如,这个图像:

https://github.com/favicon.ico

我在代码中尝试的内容如下:

vis.selectAll("path")
     .data(nodes)
   .enter().append("path")
     .attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; })
     .append("image")
   .attr("xlink:href", "https://github.com/favicon.ico")
       .attr("x", -8)
       .attr("y", -8)
       .attr("width", 16)
       .attr("height", 16)
       .style("stroke", "black")
       .style("stroke-width", "1px")
       .call(force.drag);

它会为每个image标记添加path标记,但不会显示图像本身。任何提示?

1 个答案:

答案 0 :(得分:3)

您将每个图像附加为每个路径的子项。您可能想要的是附加一个包含路径和图像的组(我认为这是您在第一条评论中提出的问题)。

这样的事情:

var groups = vis.selectAll("g")
    .data(nodes).enter()
    .append("g")
    .attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; })
    .call(force.drag);

groups.append("path")
    .attr("d", d3.svg.symbol()
        .size(function(d) { return d.size; })
        .type(function(d) { return d.type; }))
    .style("fill", "steelblue")
    .style("stroke", "black")
    .style("stroke-width", "1.5px");

groups.append("image")
   .attr("xlink:href", "https://github.com/favicon.ico")
       .attr("x", -8)
       .attr("y", -8)
       .attr("width", 16)
       .attr("height", 16)
       .style("stroke", "black")
       .style("stroke-width", "1px");

请参阅:http://jsfiddle.net/findango/a7as6/4/