0

嗨，我正在研究 d3.js 库的力导向图示例，但我想修复所有节点的位置。当我单击节点时，我想显示一个弹出窗口，其中显示图像和用户（节点）的一些信息。

4

2 回答 2

1

我会尽力回答，但你的问题有很多内容要涵盖，所以这更多是对在哪里寻找更多信息的概述，并让你开始走上正确的道路。

请原谅伪劣链接（我不能发布超过两个...）

可以通过将每个单独节点的布尔“固定”属性设置为 true 来固定节点的位置。

请参阅以下部分：# force.nodes([nodes]) https://github.com/mbostock/d3/wiki/Force-Layout

要使节点可单击，您可以在将新节点附加到节点选择时将事件侦听器附加到节点选择。见这里：Github /mbostock/d3/wiki/Selections#wiki-on

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

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

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

于 2013-07-25T13:21:10.913 回答
0

为了补充亚历克斯的答案，这是一个简单的示例，假设您已将属性name与每个数据值相关联。所以你会希望每个节点都有一个g元素，每个节点g都有 acircle和 a 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})
                   });
于 2013-07-25T17:40:10.643 回答