我可以使用D3.js创建流程图(无树形图)

Question

我可以创建这样的流程图:

使用D3.js库从json对象开始？

json结构应该是什么样的？

你有任何我可以分析的例子吗？

非常感谢你.

Answer 1

在我看来,D3.js并不适合这种可视化.可视化过于复杂,无法进行从数据到SVG的简单映射(这就是D3.js主要用于:通过简明映射从Data生成DOM(文档)).

您可以通过在两者之间引入更多逻辑来解决这些限制,以便不直接显示数据,而是创建模型,进行一些计算,然后通过D3将结果转换为SVG.这就是达格尔试图做的事情并且运作得相当好.

但是,您的图形具有一些特殊约束,当前布局算法的简单实现不支持这些约束:在最后一层中,您将获得类似fork的渲染.在"决策"层中,您为边缘分配约束,使它们离开节点的左侧和右侧,您还将决策节点约束在同一层上.

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

yFiles for HTML就是这样一个库:在这个演示中,您可以使用以下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中.不幸的是,添加这些约束无法通过我上面正在使用的演示界面来完成,但需要通过向演示的实际源代码添加更多代码来完成.您可以在此交互式布局演示中看到这些约束如何在另一个演示中工作(尽管没有JSON).

将所有的碎片放在一起,您可以轻松地自动实现这种结果:

可以在此交互式流程图布局演示中以交互方式找到并尝试相同的示例.

免责声明:我为创建该库的公司工作,但在SO/SE上我不代表我的雇主.我的帖子是我自己的.

Answer 2

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

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 3

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

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