D3力导向图设计

Question

有人可以在JSFiddle上查看我的实现并给我一些指示，使我的代码更清晰，更健壮吗？

我在JsFiddle中一直在研究这个问题。我试图为工作流设计获得一个很好的干净图实现。例如，我们在其间有输入和输出节点和进程。虽然我已经在C＃中完成了linq风格的函数式编程，但是这个javascript实现有点难以理解。我想要的所有功能都在各种示例代码中。我试图将它们组合在一起，但它可能更整洁更好。

http://jsfiddle.net/3ckG5/9/

这些定义让我感到困惑，它们在示例中有不同的名称和属性。真的没有得到它。

var svg = d3.select('body')
    .append('svg')
    .attr('width', width)
    .attr('height', height);

对象范围让我感到困惑，我并不完全理解它们。

以下是功能列表，粗体文字表示正常工作。此示例构成了实现的基础（http://bl.ocks.org/rkirsling/5001347），其他示例与它们赋予的功能位置相关联。然而，我感到困惑，因为他们各自的工作略有不同，将它们组合在一起比预期更具挑战性。

节点

节点以电荷值相互排斥

控制节点颜色

控制节点半径

控制节点标签

删除节点

删除节点，也删除该节点的输入和输出//节点​​选择器???

节点拖动和重新定位。有点......但哦，所以马车（http://bl.ocks.org/norrs/2883411）

只能拖动和重新定位过程节点。

根据关联的过程节点位置重新定位节点输入或输出。

节点上的标签

只有节点输入和输出可以形成链接

只有节点输入可以连接到节点输出，反之亦然。

只能连接相同的输入/输出类型

在连接两个节点时，更改可连接的相同类型的所有节点的颜色。

链接

设置链接长度

拖放线是在鼠标按下时生成的。

链接上的标记

标记总是从输入指向输出。

区域

平移/缩放（http://bl.ocks.org/benzguo/4370043）

任何提示都将不胜感激。

在STACKEXCHANGE中重复.....虽然他们觉得这是不在话题。任何人？任何人都有一些积极的意见吗？