d3.js 中的网络多路径正交图答案

【问题标题】：Network multi-route orthogonal graph in d3.jsd3.js 中的网络多路径正交图
【发布时间】：2013-05-01 17:32:06
【问题描述】：

我们想使用 d3 来绘制一个网络路由图，它具有固定的起点和终点节点，但其间的不同路径可能共享一些节点，例如：

我从Configure fixed-layout static graph in d3.js 读取了 cmets 并成功创建了一个简单的图表，例如：

但是当我向图中添加更多节点时，它变得随机（刷新后不是静态的）并且不再正交：

所以我的问题是：

是否可以使用 d3.js 绘制接近所需的东西图形？
或者有没有一种算法我应该在我的图实现？

【问题讨论】：

看起来你在添加新节点时正在初始化力。这是使用强制导向布局吗？如果是这样，那么您需要删除对 force.start() 或 force.restart() 的任何引用，以防止它返回到强制导向状态。
是的：我正在使用强制导向布局。您是要删除强制导向的布局吗？如果没有排斥力，我如何确保节点不会发生碰撞？

标签： graph svg d3.js javascript

【解决方案1】：

在这里查看我的演示。

http://jsfiddle.net/doraeimo/JEcdS/

主要思想是基于树建立连接。

    //1)temporarily convert a connectivity to a tree        
    var tree = conv2tree(data);

    //2)calculate for nodes' coords with <code>cluster.nodes(tree);</code>
    var nodes = buildNodes(tree);

    //3)append all the edges(links) of the connectivity
    var links = buildLinks(data);

【讨论】：

节点 systemD/E/F/G 堆叠在一起。 Dagre 解决了我们的问题——它很好地对齐了节点。
不错！我认为很难自动对齐任何复杂的网络图。有什么特殊的算法吗？

【解决方案2】：

我使用 Dagre-d3 构建了一个示例，它将 Dagre（@frank 建议）与 D3 集成。

// Display options
var options = {
  rankdir: "LR"
};

// Create the input graph
var g = new dagreD3.graphlib.Graph()
  .setGraph(options)
  .setDefaultEdgeLabel(function() {
    return {};
  });

// Set nodes
var n_nodes = 8;
for (var i = 0; i < n_nodes; i++) {
  g.setNode(i, {
    label: i
  });
}

g.nodes().forEach(function(v) {
  var node = g.node(v);
  node.shape = "circle";
});

// Set edges
g.setEdge(0, 1);
g.setEdge(1, 2);
g.setEdge(2, 3);
g.setEdge(3, 4);
g.setEdge(4, 5);
g.setEdge(1, 1);
g.setEdge(1, 6);
g.setEdge(6, 7);
g.setEdge(7, 0);
g.setEdge(7, 4);

// Create the renderer
var render = new dagreD3.render();

// Set up an SVG group so that we can translate the final graph.
var svg = d3.select("svg");

// Run the renderer. This is what draws the final graph.
render(svg, g);

.node {
  pointer-events: none;
}

.node circle {
  stroke: darkgray;
  fill: lightgray;
}

.edgePath path {
  stroke: black;
}

<script src="https://d3js.org/d3.v4.min.js" charset="utf-8"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/dagre-d3/0.6.1/dagre-d3.min.js"></script>

<svg width=960 height=600></svg>

【讨论】：

【解决方案3】：

Dagre 解决了我们的问题。它正是我们需要的。

【讨论】：