6

我的目标是使用 d3 强制布局来显示共享相同节点的两个不同网络。例如，在四个人中，您可以定义一个社交网络和一个家谱网络；节点将是相同的（人），但链接（关系）可能不同。尽管创建了两个单独的力布局，两个单独的 svg 画布，并尝试定义单独的变量，但节点共享 x 和 y 位置信息。这是一个最小的示例，其中一个网络上的拖动节点会更改它们在另一个网络中的位置：http: //amath.colorado.edu/student/larremore/nodesSharingPositiond3

下面，我发布了用于创建其中一个网络的函数，创建另一个网络的代码非常相似，但在所有实例中使用不同的变量名称。创建两个网络的注释代码可以在http://amath.colorado.edu/student/larremore/nodesSharingPositiond3/lib/minimal.js中找到，用于定义变量的脚本可以在 /driver/minimalScript.js 中找到- 我没有足够的声誉直接链接这个。我很抱歉！

在 d3.force 工作方式的某个地方，位置信息是全局的或被全局选择的，或者其他什么。任何人都可以阐明这一点吗？我对保持位置信息分离的解决方案以及了解 d3.force 如何处理和更新位置计算都很感兴趣。

function makeYNet() {

// This populates the YactiveLinks variable with the proper YLinks. The goal is to be able to only display links whose value is above some threshold.
for (var i=0; i<YLinks.length; i++) {
    if (YLinks[i].link2 > thr) {
        YactiveLinks.push(YLinks[i]);
    }
}

// Add nodes and links to forceY
forceY
.nodes(YNodes)
.links(YactiveLinks);

// Draw lines
var Ylink = svgY.selectAll("line.link")
.data(YactiveLinks)
.enter()
.append("line")
.attr("class", "link")
.style("stroke-width", 2.0);

// Draw nodes
var Ynode = svgY.selectAll("circle.node")
.data(YNodes)
.enter().append("circle")
.attr("class", "node")
.attr("r", radius)
.attr("high",0)
.attr("id", function(d,i) {
      return ("idy" + i);
      })
.style("fill", function(d) { return color(d.group1); })
.call(forceY.drag)
;

// Define tick 
forceY.on("tick", function() {
          Ylink
          .attr("x1", function(d) { return d.source.x; })
          .attr("y1", function(d) { return d.source.y; })
          .attr("x2", function(d) { return d.target.x; })
          .attr("y2", function(d) { return d.target.y; });

          Ynode.attr("cx", function(d) { return d.x; })
          .attr("cy", function(d) { return d.y; });
          });

// Start 'er up
forceY.start();
}
4

2 回答 2

5

我写了一个工具，允许浏览生物监管网络，并排显示两个 SVG 面板。每个面板都包含一个强制布局网络，由 d3.js API 绘制。

我发现完成这项工作的关键是给 DOM 中的每个元素一个唯一的名称，其中可能存在重复。

在我的例子中，我对每个面板元素使用_left和_right就足够了，其中元素分别位于左侧面板或右侧面板中。跟踪的工作量很大，但是网络渲染器可以将其调用和事件定位到正确的元素和网络。

在你的情况下：

.attr("id", function(d,i) {
      return ("idx" + i);
      })

您希望将return值替换为唯一寻址与节点关联的网络的值。无论您使用索引编号方案还是像我一样使用基于后缀的方法，诀窍是确保所有id名称都是唯一的。

于 2012-11-30T18:08:30.120 回答
0

Javascript 因混淆状态是否共享而臭名昭著。您的最小示例不再可用，但是当我遇到同样的问题时，我的结论是我只在需要完整克隆的地方制作浅拷贝。（我说的是 D3 作为输入的链接和节点。）

如您所见，如果没有真正的副本，结果行为将有点随机，这取决于 D3 代码是否选择“原位”修改任何共享数据。通常，出于性能原因，D3尽量不创建副本。

这就是 json 调用解决方法起作用的原因：通过将所有数据完全字符串化，您实际上是在强制执行克隆操作。

于 2017-09-24T01:45:40.730 回答