var tree = d3.layout.tree().nodeSize([70, 40]);
var diagonal = d3.svg.diagonal()
    .projection(function (d) {
    return [d.x + rectW / 2, d.y + rectH / 2];
});

var svg = d3.select("#body").append("svg").attr("width", 1000)
    .attr("height", 1000).append("g")
    .attr("transform", "translate(" + 350 + "," + 20 + ")");

这是我开始的jsFiddle： http://jsfiddle.net/augburto/YMa2y/

Answer 4

简而言之，@ Cam是正确的，但您不一定需要查看Silverlight或Flash。我建议您查看Raphael.js库。它比你想象的更低级，但API非常简单。

特别是Graffle example将是一个很好的起点。

Answer 5

对于那些寻找简单的开源Javascript组织结构图库的人：

我刚刚发布了lib_gg_orgchart。它使用JSON输入并使用Raphael绘制图表。

该库满足原始问题的要求＃1和＃2。

查看网站上的一些示例并下载：

http://librerias.logicas.org/lib_gg_orgchart/index.html

如果您觉得有用，请告诉我。

Answer 6

lib_gg_orgchart的新网站主页为http://librerias.logicas.org/lib_gg_orgchart。我在这里提供旧信息：对于那些寻找简单的开源Javascript组织结构图库的人：我刚刚发布了lib_gg_orgchart。它使用JSON输入并使用Raphael绘制图表。看一下网站上的一些例子并下载。如果您觉得它很有用，请告诉我。新版本即将推出，修复一些错误并整合协作者的更改。

Answer 7

在商业场景yFiles for HTML当然提供了所需的灵活性：

有一个简单的组织结构图demo online，显示了如何使用库（实际上是通用图形绘制库）实现这一点：

库中的自动布局算法既可以处理纯粹的分层树结构，也可以处理“近树”结构，其中元素可以具有多个父元素，例如为管理团队或多家母公司建模。

该库还具有布局算法，可以处理具有任意循环复杂度的通用图，并且可以使用边缘路由算法，甚至可以很好地可视化罕见边缘情况，其中不属于严格分层树结构的边可以也被路由（例如表示一层额外的关系） - 这不是上面链接的演示的一部分，但在撰写本文时。然而，更通用的layout demo显示了几种布局算法以及它们的许多选项。

免责声明：我为创建该图书馆的公司工作，但是我不代表我的雇主。我的评论，想法和答案都是我自己的。

Answer 8

如果你正在寻找像google那样的服务的替代方案，我认为你没有。如果您正在寻找可以为您创建这些图表的库（js，php，flash）（您可以在服务器中安装库，并创建一个简单的界面来创建图表对象），您可以搜索{{3} }或older posts in SO。

如果您只对组织结构图创建者感兴趣，那么为了完成工作，我认为没有什么比searching some blog posts in google好。如果您只需创建一个图表，并且不想为其付费，则可以使用Creately's solutions。

Answer 9

您可以使用Graphviz和Javascript实施解决方案。 Graphviz可以轻松处理您的所有三个条件。在graphviz中创建图形，并以SVG格式输出。从那里，扔一些javascript。例如，a partial family tree of Charlemagne，这本质上是一个非常复杂的组织结构图。

Answer 10

您可以使用特里：https://github.com/mikedeboer/trie或https://github.com/odhyan/trie Mootools也有MIF.Tree：http://mootools.net/forge/p/mif_tree，它显示树状结构

Answer 11

www.orgchartasp.net也可以帮助您构建/查看orgcharts

http://orgchartasp.net/Sample.aspx

http://orgchartasp.net/Sample1.aspx（图片位于顶部）

http://orgchartasp.net/Sample1.aspx（图片左侧）

这是一个.net库，它将帮助您在后端构建层次结构，并在客户端构建javascript。

Answer 12

G'Day ooo

我会保持这个简短。不，没有。反正不是用Javascript。您可能会发现http://www.cogmap.com/很有趣，但这不是您可以在自己的网页上用作控件的内容。

就个人而言，我会看一些像Silverlight或Flash这样丰富的嵌入式媒体。这是你的选择吗？

凸轮

Answer 13

我也使用谷歌组织结构图API来显示我们的组织结构图。 https://developers.google.com/chart/interactive/docs/examples

这很有效但我们需要支持的东西：

1）来源是一个Google电子表格文档，其中包含组织结构图的数据。 2）当向数据添加新人时，将创建新节点。 3）第一级和第二级的水平布局以及较低级别的垂直布局。与此类似： http://google-visualization-api-issues.googlecode.com/issues/attachment?aid=8730161231813373288&name=orgchart.png&token=RT7QPbsD-WkveIgybTZyXi48g84%3A1361392544450&inline=1

1和2受Google支持且效果很好，但需要满足这3要求（水平和垂直布局）

与Google Org Chart API相比，是否有更好的javascript组织结构图？

13 个答案: