与 Google Org Chart API 相比，有没有更好的 javascript 组织结构图？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3923221/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Are there any better javascript org charts compared with Google Org Chart API?
提问by leora
We are using google org chart API to display our org charts. This works well but we need something that supports:
我们正在使用google org chart API 来显示我们的组织结构图。这很有效，但我们需要一些支持：
- One person reporting to multiple managers
- Co heads of a functional areas.
- 一个人向多位经理汇报
- 一个职能领域的联合负责人。
Are there any competing tools that give better support for the above.
是否有任何竞争工具可以更好地支持上述内容。
NOTE: For Gorka LLona, who suggested this solution below in one of the answers, i found a few bugs, here is a screenshot of the issue i am running into using your test example.
注意：对于 Gorka LLona，他在下面的一个答案中建议了这个解决方案，我发现了一些错误，这是我在使用您的测试示例时遇到的问题的屏幕截图。
回答by James Westgate
D3 - http://d3js.org/
D3 - http://d3js.org/
Here is an example - they are a bit hard to find
这是一个例子——它们有点难找
回答by Beau
You could use Jit (The JavaScript Infoviz Toolkit), there's a good example here. This is what I used to create an org chart at my company (backed by a PHP script that turns AD relationships into JSON).
您可以使用 Jit（The JavaScript Infoviz Toolkit），这里有一个很好的例子。这是我用来在我的公司创建组织结构图的内容（由将 AD 关系转换为 JSON 的 PHP 脚本支持）。
回答by aug
Not sure if you're still looking considering this is 2 years old but I'm in the same situation and found this:
不确定你是否还在考虑这是 2 岁，但我处于同样的情况并发现这个：
yFILES Interactive OrgChart Demo, Visualizing Orgcharts with JavaScript
yFILES Interactive OrgChart Demo,用 JavaScript 可视化组织图
Some other ones I have found:
我发现的其他一些：
jOrgChart github.com/wesnolte/jOrgChartand github.com/dabeng/OrgChart
jOrgChart github.com/wesnolte/jOrgChart和github.com/dabeng/OrgChart
Organization Charts using JS jvloenen.home.xs4all.nl/orgchart/
使用 JS 的组织结构图 jvloenen.home.xs4all.nl/orgchart/
I ended up using D3.jsto do it. I use their TreeLayout and edited it to fit my needs. Here is some sample code:
我最终使用D3.js来做到这一点。我使用他们的 TreeLayout 并对其进行了编辑以满足我的需要。下面是一些示例代码：
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 + ")");
Here is a jsFiddle of what I started: jsfiddle.net/augburto/YMa2y/
回答by Horatio Alderaan
In short @Cam is right, but you don't necessarily need to look at Silverlight or Flash. I would recommend looking into the Raphael.jslibrary. It's more low-level than what you seem to be after, but the API is pretty simple.
总之@Cam 是对的，但您不一定需要查看 Silverlight 或 Flash。我建议查看Raphael.js库。它比您所追求的更底层，但 API 非常简单。
In particular the Graffle examplewould be a good place to start.
特别是Graffle 示例将是一个很好的起点。
回答by Gorka Llona
New web home for lib_gg_orgchart is http://librerias.logicas.org/lib_gg_orgchart. I put here the old info: For those looking for a simple, open-source Javascript Organizational Chart library: I've just published lib_gg_orgchart. It uses a JSON input and draws the chart using Raphael. Take a look at the site for some examples and download. If you find it useful, please let me know. New version will come soon, fixing some bugs and integrating collaborator's changes.
lib_gg_orgchart 的新网站主页是http://librerias.logicas.org/lib_gg_orgchart。我把旧信息放在这里：对于那些正在寻找一个简单的、开源的 Javascript 组织结构图库的人：我刚刚发布了 lib_gg_orgchart。它使用 JSON 输入并使用 Raphael 绘制图表。查看该站点以获取一些示例并下载。如果您觉得有用，请告诉我。新版本即将推出，修复了一些错误并集成了合作者的更改。
回答by Gorka Llona
For those looking for a simple, open-source Javascript Organizational Chart library:
对于那些正在寻找一个简单的、开源的 Javascript 组织结构图库的人：
I've just published lib_gg_orgchart. It uses a JSON input and draws the chart using Raphael.
我刚刚发布了 lib_gg_orgchart。它使用 JSON 输入并使用 Raphael 绘制图表。
This library satisfies requirements #1 and #2 of the original question.
该库满足原始问题的第 1 条和第 2 条要求。
Take a look at the site for some examples and download:
查看该站点以获取一些示例并下载：
http://librerias.logicas.org/lib_gg_orgchart/index.html
http://librerias.logicas.org/lib_gg_orgchart/index.html
If you find it useful, please let me know.
如果您觉得有用，请告诉我。
回答by Sebastian
In a commercial scenario yFiles for HTMLcertainly provides the required flexibility for drawing organization charts:
在商业场景中，yFiles for HTML无疑为绘制组织结构图提供了所需的灵活性：
There is an organization chart demo onlinethat shows how this can be implemented with the library (which is in fact a general purpose graph drawing library):
网上有一个组织结构图演示，展示了如何使用该库（实际上是一个通用图形绘制库）来实现这一点：
The automatic layout algorithms in the library can both deal with purely hierarchic tree structures, but can also deal with "near-tree" structures, where elements can have multiple parents, e.g. to model a management team or multiple parent companies.
库中的自动布局算法既可以处理纯粹的层次树结构，也可以处理“近树”结构，其中元素可以有多个父级，例如为管理团队或多个母公司建模。
The library also has layout algorithms that can deal with generic graphs with arbitrary cyclic complexity and with the edge routing algorithms available, even rare edge cases can be visualized nicely, where edges that do not belong to the strict hierarchical tree-structure can be routed, too (e.g. to indicate an additional layer of relationships) - this is not part of the demo linked above, though, at the time of writing. The more generic layout demohowever shows several of the layout algorithms and many of their options in action.
该库还具有布局算法，可以处理具有任意循环复杂度的通用图和可用的边路由算法，甚至可以很好地可视化罕见的边缘情况，其中可以路由不属于严格层次树结构的边，也是（例如，表示额外的关系层）-尽管在撰写本文时，这不是上面链接的演示的一部分。然而，更通用的布局演示显示了几种布局算法和它们的许多选项。
Disclaimer: I work for the company that creates that library, however on SO I do not represent my employer. My comments, thoughts, and answers are my own.
免责声明：我为创建该库的公司工作，但是在 SO 我不代表我的雇主。我的评论、想法和答案都是我自己的。
回答by GmonC
If you're looking for alternatives that works as a servicelike google does, I don't think you have any. If you're looking for libraries (js, php, flash) that can create these charts for you (you can install the libs in a server, and create a simple interface to create the chart objects) you can search for older posts in SOor by searching some blog posts in google.
如果您正在寻找像谷歌那样作为服务工作的替代方案，我认为您没有。如果您正在寻找可以为您创建这些图表的库（js、php、flash）（您可以在服务器中安装这些库，并创建一个简单的界面来创建图表对象），您可以在 SO 中搜索较旧的帖子或者通过在 google 中搜索一些博客文章。
If you're only interested in an Org Chart creator, just to get the work done, nothing beats Creately's solutionsin my opinion. If you need to create just one diagram, and don't want to pay for it, you can use Lovely Charts.
如果您只对组织结构图创建者感兴趣，只是为了完成工作，在我看来，没有什么比Creately 的解决方案更胜一筹了。如果您只需要创建一个图表，并且不想为此付费，您可以使用Lovely Charts。
回答by Dan
You can implement a solution with Graphvizand Javascript. Graphviz easily handles all three of your conditions. Create the graph in graphviz, and have it output in SVG format. From there, throw some javascript on it. For example, a partial family tree of Charlemagne, which is essentially an extraordinarily complex org chart.
您可以使用Graphviz和 Javascript实施解决方案。Graphviz 可以轻松处理您的所有三个条件。在 graphviz 中创建图形，并以 SVG 格式输出。从那里开始，在上面扔一些 javascript。比如查理曼大帝的部分家谱，本质上是一个异常复杂的组织结构图。
回答by peterhil
You could use a trie: https://github.com/mikedeboer/trieor https://github.com/odhyan/trieMootools also has MIF.Tree: http://mootools.net/forge/p/mif_tree, which displays tree structures
您可以使用 trie：https: //github.com/mikedeboer/trie或https://github.com/odhyan/trieMootools 也有 MIF.Tree：http://mootools.net/forge/p/mif_tree ，显示树结构
