Question

我目前正在使用 Backbone.js 开发Web应用程序。我需要能够以树的方式绘制对象并将父级连接到兄弟姐妹等。

有一些示例可以将绘图对象演示到画布上，并将input_instructions和hover事件附加到每个画布对象，但是没有关于如何连接的任何实现示例对象。

例如，假设我们有一个JSON对象：

click

会画出类似的东西：

有人能指出我使用 Backbone.js 来实现这个目标的正确方向，或者甚至更好，提供一个例子吗？我不知道我应该从哪里开始。

Answer 1

我能找到的最好的两个是基于SVG.js库的Flow-svg和基于Raphaël的flowchart.js。两个Git页面都有相当清晰的示例和文档代码。然而，flowchart.js有自己的速记语言，而Flow-svg有一个结构良好的json系统 - 与你的系统和许多样式选项并没有太大不同。下面的代码段：

    flowSVG.draw(SVG('drawing').size(900, 1100));
    flowSVG.config({
    	interactive: false,
    	showButtons: false,
    	connectorLength: 60
    });
    flowSVG.shapes(
    	[{
    			label: 'tops',
    			type: 'decision',
    			moveRight: 500,
    			text: ['Boss'],
    			orient: {
    				yes: 'b',
    				no: 'r'
    					// If there is a next...
    					//next: 'r'
    			},
    			yes: 'siblingA',
    			no: 'siblingB'
    		}, {
    			label: 'siblingA',
    			type: 'process',
    			text: ['Brother'],
    			next: 'end'
    		}, {
    			label: 'siblingB',
    			type: 'process',
    			text: ['Sister'],
    			next: 'end'
    		}, {
    			label: 'end',
    			type: 'finish',
    			text: ['done']
    		}

    	]);

<script src="http://rawgit.com/rtalbot89/flow-svg/gh-pages/example/svg.js"></script>
<script src="http://rawgit.com/rtalbot89/flow-svg/gh-pages/dist/flowsvg.min.js"></script>

<div id="drawing" style="margin-left:10px"></div>

使用Backbone.js在html画布上绘制和连接对象

1 个答案: