我可以使用 D3.js 创建流程图（无树形图）吗？

Question

我可以创建一个这样的流程图吗：

开始使用 D3.js 库形成一个 json 对象？

json结构应该是什么样子的？

你有什么我可以分析的例子吗？

非常感谢。

Answer 1

我可以创建这样的流程图吗？

D3 有能力做到这一点。

开始使用 D3.js 库形成一个 json 对象？

是的

json 结构应该是什么样的？

取决于您如何处理项目。我正在使用强制布局并移除强制，所以我的 JSON 是

{node:
    [{
        id: 1,
        title: 'title'
    }],
 link: 
    [{
        source: 0,
        target: 1
    }]
 }

你有什么我可以分析的例子吗？

为了你的灵感

• http://marvl.infotech.monash.edu/webcola/
• http://www.coppelia.io/2014/07/an-a-to-z-of-extra-features-for-the-d3-force-layout/

起点https://github.com/mbostock/d3/wiki/Force-Layout

如何在块http://bl.ocks.org/mbostock/7555321中换行

D3.js 不太适合这种可视化。可视化太复杂了，无法进行从数据到 SVG 的简单映射

不知道为什么，但 IMO 流程图是连接它们的最简单的图表、块和线类型之一。 D3 具有绘制节点和连接器的内置方法。是的，这不是开箱即用的解决方案。但您需要做的就是学习和定制。

Answer 2

在我看来，D3.js 不太适合这种可视化。可视化太复杂了，无法进行从数据到 SVG 的简单映射（这就是 D3.js 的主要用途：通过简洁的映射从数据生成 DOM（文档））。

您可以通过在两者之间引入更多逻辑来解决这些限制，这样就不会直接显示数据，而是会创建一个模型，进行一些计算，然后将结果由 D3 转换为 SVG。这就是dagre 正在尝试做的事情，而且效果很好。

但是，您的图形有一些特殊的约束，目前该布局算法的更简单的实现不支持这些约束：在最后一层，您会得到类似叉子的渲染。在“决策”层中，您为边缘分配约束，以便它们离开节点的左侧和右侧，您还将决策节点约束在同一层上。

所有这些信息在图形结构本身中都不可见。因此，您需要将该信息注释到您的模型中，并告诉布局算法遵守这些约束。据我所知，目前只有商业绘图库实现支持这些高级布局功能。

yFiles for HTML 就是这样一个库：在this demo 中，您可以使用以下 JSON 来获得这样的结果：

切换到顶部的组合框条目：“5 - 复杂对象 + 边缘标签”

并在Nodes Sources、Edges Source和Node Template部分修改JSON如下：

节点来源

{
0:{'name':'Start',color:'green'}, 
1:{'name':'Read A,B,C',color:'yellow'}, 
2:{'name':'Is B>C?',color:'green'},
3:{'name':'Is A>B?',color:'green'},
4:{'name':'Is A>C?',color:'green'},
5:{'name':'Print B',color:'green'},
6:{'name':'Print C',color:'green'},
7:{'name':'Print C',color:'green'},
8:{'name':'Print A',color:'green'},
9:{'name':'End',color:'red'}
}

边缘源

[
{from:'0', to:'1', label:''}, 
{from:'1', to:'3', label:''}, 
{from:'3', to:'2', label:'No'}, 
{from:'3', to:'4', label:'Yes'},
{from:'2', to:'5', label:'Yes'},
{from:'2', to:'6', label:'No'},
{from:'4', to:'7', label:'No'},
{from:'4', to:'8', label:'Yes'},
{from:'5', to:'9', label:''},
{from:'6', to:'9', label:''},
{from:'7', to:'9', label:''},
{from:'8', to:'9', label:''}
]

模板

<rect fill='{Binding color}' stroke='LightBlue' stroke-width='2' 
    width='{TemplateBinding width}' 
    height='{TemplateBinding height}'></rect>
<text transform='translate(10 20)' data-content='{Binding name}'   
    style='font-size:18px; font-family:Arial; fill:#000; text-anchor: left;
    dominant-baseline: central;'></text>

请注意，也可以使用不同类型的 JSON（如演示所示）。我不相信 JSON 格式会以任何方式成为问题，并且您可以看到您得到了不错的结果，但是我提到的约束仍然没有被考虑并添加到 JSON 中。不幸的是，添加这些约束不能通过我现在上面使用的演示界面来完成，而是需要通过在演示的实际源代码中添加更多代码来完成。您可以在 this interactive layout demo 的另一个演示（虽然没有 JSON）中看到这些约束是如何工作的。

将所有的点点滴滴放在一起，您可以轻松地自动实现这种结果：

可以在interactive flowchart layout demo 中找到并以交互方式尝试相同的示例。

^{免责声明：我为创建 yFiles（商业，在撰写本文时价格范围：0k 到 ~104k 美元）库的公司工作，但是在 SO/SE 上我这样做不代表我的雇主。我的帖子、想法和建议是我自己的。这不是广告。随意使用不同的解决方案。我已经研究这个话题将近 25 年了，那是因为我在这里。我觉得这是对OP问题的最佳解决方案和答案。}

Answer 3

我今天一直在研究这个，而且流程图.js 看起来很有希望。它支持起点和终点、操作和条件。您可以控制线条从绘制元素的哪一侧出来等。

http://adrai.github.io/flowchart.js/