如何显示节点属性，如person's的姓名、照片和地址

how to display the node attributes like person's name photo and address in a force directed graph

本文关键字：地址 照片 何显示 显示 属性 节点 person      更新时间：2023-09-26

嗨，我正在制作d3.js库的力定向图示例，但我想固定所有节点的位置。当我点击节点时，我想显示一个弹出窗口，显示用户（节点）的图像和一些信息。

我会尽我所能回答，但你的问题有很多要回答的，所以这更多的是关于在哪里寻找更多信息的概述，以及让你沿着正确的道路开始的一点。

请原谅粗制滥造的链接（我还不能发布超过两个…）

通过将每个单独节点的布尔值"fixed"属性设置为true，可以固定节点的位置。

请参阅以下章节：#force.nodes（[nodes]）https://github.com/mbostock/d3/wiki/Force-Layout

要使节点可单击，可以在将新节点附加到节点选择时，将事件侦听器附加到节点选项。请参阅此处：Github/mbstock/d3/wiki/Selections#wiki on

要为每个节点添加更多属性，只需将数据添加到"节点"数组内的对象中，然后再将其加入到您的选择中。

下面是我对它进行的编辑，展示了如何添加拖动行为，以及鼠标"点击"侦听器事件来在fixed=true和false之间切换节点，并对添加额外节点属性的位置进行了一些评论，还可能进行函数调用以显示更多节点信息。https://gist.github.com/alexhornbake/6079321

以上内容是根据以下示例编辑的。当我感到困惑时，我仍然会参考这个例子，非常有用/简单的力布局例子：Gist GitHub/mbstock/1095795

为了补充Alex的答案，这里有一个简单的例子，假设您已经将属性name与每个数据值相关联。因此，您希望为每个节点都有一个g元素，而每个g都将有一个circle和一个text。然后，您可以通过指数或值将两者联系起来，正如Mike Bostock在这里解释的那样。请注意，数据是自动从父级继承的。使用关联的点击事件将类添加或删除到将显示或隐藏的文本中。这可以使用selection.classed() 完成

var nodes = d3.select("body").append("svg:g")
                     .selectAll("g.nodeGroup")
                     .data(dataset)
                     .enter()
                     .attr("class", "nodeGroup")
                     .attr("x", function(d) { ...
                          ...
                     .each(function(d) { 
                            d3.select(this).append("circle")
                                    .attr("r", function(p) { return p.value})
                                    .on("click", function(p) {
                                         d3.selectAll("g.nodeGroup text")
                                            .filter(q) { return p.value == q.value}
                                            .classed("show", true)});
                            d3.select(this).append("text")
                                     .attr("text", function (P) { return p.name})
                   });
相关文章：