d3.js中的分层图 [英] Layered graphs in d3.js

问题描述

我目前使用Graphviz来显示控制流程图。基本上，（可缩减）控制流图是DAG加上指向前面层中的节点的一些边。后边缘不应影响节点放置。

I am currently using Graphviz for visualizing control flow graphs. Basically, a (reducible) control flow graph is a DAG plus some edges which point back to nodes in the previous layers. The latter edges should not affect node placement.

目前， dot 绘制的图形相当漂亮，容易添加交互性（例如折叠，滚动，缩放），这对于非常大的图形的分析是无价的。因此，我选择d3.js作为最成熟和功能丰富的图形库。

Currently, dot draws the graphs pretty neatly, but it lacks an easy way to add interactivity (e.g. folding, scrolling, zooming), which is priceless for analysis of very large graphs. Therefore, I selected d3.js as the most mature and feature-rich graphing library.

我确定有一个简单的方法来绘制分层图（ dot 但我似乎不认识它。我怎么做？

I'm pretty sure that there is an easy way to draw layered graphs (as does dot) in d3.js, but I don't seem to recognize it. How do I do that? If this helps, I already perform dominator analysis on my CFG.

推荐答案

有向图绘制的Dagre库是render-agnostic，但与d3.js很好地集成： https://github.com/cpettitt/dagre

The Dagre library for directed graph drawing is rendering-agnostic, but integrates well with d3.js: https://github.com/cpettitt/dagre

这里是使用D3渲染的演示： http://cpettitt.github.io/project/dagre-d3/latest/demo/interactive-demo.html

Here's a demo rendered using D3: http://cpettitt.github.io/project/dagre-d3/latest/demo/interactive-demo.html

这篇关于d3.js中的分层图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！