Question

我可以创建像这样的流程图： enter image description here

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

json结构应该是什么样的？

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

非常感谢。

Answer 1

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

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

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

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

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

Screenshot of image created with yFiles for HTML demo

切换到顶部的组合框条目：“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'}
}

Edge Source

[
{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中以交互方式找到并尝试相同的示例。

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

Answer 2

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

D3能够做到这一点。

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

是

json结构应该是什么样的？

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

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

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

获取灵感

起点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/

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

3 个答案: