用图像替换 d3.js 符号答案

【问题标题】：Replace d3.js symbols with images用图像替换 d3.js 符号
【发布时间】：2013-07-31 17:21:44
【问题描述】：

参考这个小提琴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 标记，但不显示图像本身。有什么提示吗？

【问题讨论】：

我需要追加（“g”）元素而不是“image”吗？
this 是什么意思？
是的..它实际上是最接近的示例，其中节点被名称替换。在我的 jsfiddle 示例中，我将节点强制作为符号。我需要用图像替换它们。请查看我在问题顶部添加的小提琴链接。
我不太确定“节点被名称替换”是什么意思。在我发布的链接中，节点是图像。您想与该示例有何不同？
这是一个错字..它是“节点被图像替换”。我的示例非常相似，但是如果您在我添加的小提琴上看到，我正在尝试与您提到的示例中所做的类似的事情。但它不能以某种方式工作..

标签： javascript d3.js nvd3.js

【解决方案1】：

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

类似这样的：

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/

【讨论】：

谢谢你，@findango。这很有帮助。谢谢:-)