d3的多个实例在同一页面上强制布局 [英] Multiple instances of d3 force layout on the same page

问题描述

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

My goal is to use the d3 force layout to display two different networks that share the same nodes. For example, among four people, you could define a social network and a genealogy network; the nodes would be the same (people) but the links (relationships) could be different. Despite creating two separate force layouts, two separate svg canvases, and trying to define separate variables, the nodes are sharing x and y positional information. Here is a minimal example, in which dragging nodes on one network changes their positions in the other network: http://amath.colorado.edu/student/larremore/nodesSharingPositiond3

下面，我发布了调用的函数来创建一个网络，创建另一个网络的代码非常相似，但是在所有实例中使用不同的变量名。有关创建两个网络的注释代码，请参见 http：// amath。 colorado.edu/student/larremore/nodesSharingPositiond3/lib/minimal.js 和用于定义变量的脚本可以在/driver/minimalScript.js中找到< - 我没有足够的信誉来链接这个直。

Below, I posted the function that is called to create one of the networks, and the code to create the other is very similar, but uses different variable names in all instances. The commented code for creating both networks can be found in http://amath.colorado.edu/student/larremore/nodesSharingPositiond3/lib/minimal.js and the script used to define variables can be found in /driver/minimalScript.js <-- I don't have enough reputation to link this directly. My apologies!

d3.force的某个方面，位置信息是全局的或全局选择的。谁能说明这一点？我感兴趣的是保持位置信息分离的解决方案，以及理解d3.force如何处理和更新位置计算。

Somewhere in the way d3.force works, positional information is global or being selected globally, or something. Could anyone shed light on this? I am interested both in a solution to keeping the positional information separated as well as in understanding how d3.force handles and updates position computations.

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();
}

推荐答案

浏览生物监管网络，并排显示两个SVG面板。每个面板包含由d3.js API绘制的力布局网络。

I wrote a tool that allows browsing biological regulatory networks, showing two SVG panels side-by-side. Each panel contains a force-layout network, as drawn by the d3.js API.

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

I found that the key to making this work is to give every element in the DOM a unique name, where there can be duplication.

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

In my case, I used _left and _right as suffices to every panel element, where the element is in the left or right panel, respectively. It is a lot of work to keep track of, but the network renderer can target its calls and events to the correct element and network.

在你的情况下：

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

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

You want to replace the return value with something that uniquely addresses the network that the node is associated with. Whether you use a index numbering scheme or a suffix-based approach, like I did, the trick is to make sure all id names are unique.

这篇关于d3的多个实例在同一页面上强制布局的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！