无法将图像和文本svg元素附加到D3.js中的力导向树图

Question

我正在学习js，并决定今天解决D3问题。

我正在尝试扩展this example。我想在每个节点上映射图像，并附加文本。我发现this StackOverflow post对于入门很有帮助。我已将其中的详细信息用于上面的第一个示例，并提出了this。看起来我试图将文本和图像附加到“g”，然后g到控制图形的力量，可能会出现问题。

任何见解都会非常有用。谢谢！

Answer 1

Bl.ock的主要问题是你没有调用你的html文件index.html - Bl.ocks不够聪明，不能识别其他名字。我注意到的其他事情是你在本地引用d3，使用Bl.ocks这将无法工作，除非你上传一个d3，当你可以指向它时毫无意义：

<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>

您还需要将它放在标题标记之间。我已经分叉了你的Bl.ock并做了一些小改动here，它运作得很好。

当然，这些东西不会帮助你追加图像。您可以将图像作为背景放置在您的圆圈中，就像在此question中一样，或者您可以添加图片，而不是尝试将其附加到圆圈。我无法确切地看到您的代码中发生了什么，但一般模式将类似于：

d3.selectAll(".node")
    .data(nodes).enter()
    .append("image")
    .attr("xlink:href", "url")
    .attr("x", x stuff)
    .attr("y", y stuff)
    .attr("height", "16px")
    .attr("width", "16px")

我无法看到您将数据（节点）绑定到重要的图像上。