在 D3.js 中将图像和文本 svg 元素附加到力导向树图中时出现问题

Trouble appending image and text svg elements to a force-directed tree graph in D3.js

本文关键字：问题 图像 js D3 文本 元素 svg      更新时间：2023-09-26

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

我正在尝试扩展此示例。我想在每个节点上映射一个图像，并附加文本。我发现这个StackOverflow帖子对入门有很大帮助。我已经将它的细节处理到上面的第一个示例中，并提出了这个。看起来我尝试将文本和图像附加到"g"，然后将 g 附加到控制图形的力时可能会出现问题。

任何见解都将非常有帮助。谢谢！

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

我看不到您将数据(节点(绑定到图像，这很重要。

相关文章：