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

Question

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

我正在尝试扩展此示例。我想在每个节点上映射一个图像，并附加文本。我发现这篇 StackOverflow 帖子对入门有很大帮助。我已经在上面的第一个示例中处理了它的细节并提出了这个。看起来我尝试将文本和图像附加到“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 并在这里做了这些小改动，它工作得很好。

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

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")

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