【.com速译】众所周知，家谱是一种特殊的图表，它能以树状结构向人们展示家庭各代成员之间的关系。在实际的历史介绍、社会关系梳理、医学研究项目中，我们往往需要借助可视化工具来展示某种谱系类型的关系图。显然，从头开始构建结构良好且丰富的JavaScript图并将其集成到现有的Web应用程序中将是一项艰巨的任务。这就是为什么Web开发人员经常求助于JS组件来加快流程并避免不必要的错误。下面我们就以生成各个名门家族的家谱图为例，来探讨一下目前流行的六大JavaScript图表库及其主要功能。1.DHTMLXDiagram作为一个可自定义和可配置的JavaScript库，DHTMLXDiagram可以更快地构建各种类型的跨浏览器图表。除了这里讨论的家谱，它还可以通过组织结构图、流程图、UML类图等直观呈现不同量级的数据。使用它提供的轻量便捷的API，你可以轻松创建JavaScript类型的家谱图通过其内置的形状。如果想让家谱的外观看起来更精致，可以使用传统的HTML组件（例如各种文本、图像或图标）来补充每个成员节点上的属性。您甚至可以向各个节点添加紧凑的上下文菜单，为查看者提供交互式控件。通常，各种样式选项允许您通过API或CSS根据需要修改图表的外观。DHTMLX控件可以通过流行的JS框架（如Angular、React、Vue.js）无缝集成到Web应用程序中。您可以按照链接中的分步指南学习如何使用DHTMLX构建各种树状图。值得一提的是，DHTMLXDiagram有实时编辑器，无需操作代码即可随时编辑。其中，它的左侧面板允许您通过拖放来选择需要的形状；它的右侧面板可以为选中的形状提供各种编辑设置，包括：大小、位置、颜色、描边、内容修改等。当然你也可以根据项目的实际需要在这个编辑器中添加自定义形状，以及设置各种参数进行编辑。DHTMLXDiagram的自动布局算法让您无需手动布局即可设计大型图表。此外，它的实用功能还包括：展开和折叠图表树的分支、放大和缩小以及使用搜索字段检索特定形状，所有这些都可以使与大型图表的交互更加高效和省时。此外，那些完整的家谱图可以通过DHTMLXDiagram导出为PDF、PNG或JSON等格式。受益于全面的文档、详细的指南和交互式示例，用户可以快速掌握DHTMLXDiagram的主要概念并受益于其丰富的功能集。DHTMLXDiagram试用版下载链接为：https://dhtmlx.com/docs/products/dhtmlxDiagram/download.shtml价格：599-2899美元2.yFilesforHTML是一个JavaScript类型的图形可视化工具包，yFilesforHTML可以利用SVG、WebGL和HTML5Canvas等流行的绘图技术来创建各种精美的图表。用于生成家谱图时，yFilesforHTML提供了多种现成的几何形状，并支持性别和多种文本标签的颜色编码，从而让图表节点包含更丰富的信息。同时，您可以通过缩放、平移、撤消、重做等编辑功能轻松修改应用程序中的图表。您可以点击链接查看约翰·肯尼迪家族的全貌，如上图。另外，在配置图表结构时，可以使用FamilyTreeLayout的特殊算法，根据性别等条件组织家谱上的每个节点。yFilesforHTML的实用性还体现在：绑定Typescript，提供ECMAScript各项功能支持，兼容各种主流JavaScript框架。您可以通过一系列Demo应用程序、开发人员指南和各种教程（。yFilesforHTML试用版的下载链接为：https://my.yworks.com/signup?product=YFILES_HTML_EVAL价格：11,900.00美元起3.GoJSGoJS是一种基于TypeScript的解决方案，可用于生成各种复杂程度的表格和图形，从基本树图到综合工业图。例如，您可以创建具有可折叠和可展开属性的传统家谱，或者可以使用给定家庭的关系进行扩展的详细树表。如上图所示，大家可以点击链接查看日本皇室全图。GoJS不仅可以通过个性化的模板和布局节省用户在选择和构建图表上花费的时间，还提供了一系列功能，例如：本地文本编辑、工具提示、上下文菜单、调色板和概览，以改善用户体验.此外，还可以通过特殊工具为图表的不同元素执行自定义动画。由于是独立于第三方的工具，GoJS非常适合基于通用JavaScript框架的开发。此外，GoJS还可以运行在headless或像Node.js这样的服务器环境中。通过相关的技术说明、完整的API文档和各种交互示例，您可以深入了解GoJS的技术特性以及如何将其应用到您自己的应用程序中。GoJS的试用版下载链接是：https://www.nwoods.com/products/register.html价格：从$3,495到$9,9504.BasicPrimitivesDiagramBasicPrimitives专注于提供家谱图、组织图、不同大小的Hierarchy，PERT图、技术树和企业所有权图。它使用SVG和Canvas等流行的设计技术为主要浏览器创建图形。用户可以通过这个基于网络的类似图表的JS库轻松生成报告并进行分析。通过使用特殊的自动适配模式，用户可以查看特定逻辑图节点的详细信息。据此，选中的节点会自动放大，当用户跳转到下一个节点时，会自动缩小，从而实现大家谱中节点间的交互和浏览节奏。此外，JavaScript库还可以根据用户指定的排序规则自动排列家谱上的节点。当然，如果指定的规则不合适，系统也可以选择自动忽略。如果您习惯使用React、AngularJS和jQuery，则可以将BasicPrimitives生成的图表直接添加到您的应用程序中。此外，在集成过程中，您可以参考其开发团队提供的各种示例和API用例。BasicPrimitives的试用下载链接是：https://www.basicprimitives.com/downloads价格：从427美元到2,308美元5.OrgChartJSOrgChartJS是一个JavaScript插件，具有广泛的组织结构图和说明性家谱图。您可以使用其预定义的模板来创建图表，也可以基于现成的图表为不同的应用程序创建自定义模板或多个模板。此外，OrgChartJS允许用户在同一个图表对象中实现无限数量的子树。当然，如果你对图表的外观有要求，你也可以根据需要自定义调整它的CSS。大家可以点击链接查看英国王室的完整家谱，如上图。这个插件的另一个有用的特性是内置的编辑表单。它不仅允许您快速更新图表及其元素，还可以处理具有导航功能和展开/折叠选项的数据密集型图表。此外，如果您需要与他人分享您的家谱，OrgChartJS还支持将图表导出为：PDF、PNG、SVG、CSV等格式。您可以通过文档页面了解OrgChartJS的功能描述以及如何将JavaScript插件与React、Vue.js、Angular等集成。OrgChartJS的试用版下载链接是：https://balkangraph.com/OrgChartJS/Download价格：从$399到$4,9996.dTreedTree可以用来创建一个有很多父母的基本家谱（如下图所示），或具有其他层次结构的图表。这个轻量级前端JavaScript库使用复杂的D3.js。D3.js利用最新的网络标准通过各种类型的可视化界面呈现数据。值得一提的是，dTree使用了一种简单的JSON数据格式。可以使用Treehouse在线查看器检查dTree生成的图表，并托管目标家谱，而无需创建额外的网站。dTree可以从GitHub获取数据并以漂亮的格式显示。值得注意的是，在您的应用程序中使用此JS库之前，您必须加载D3v4.x。您可以从其GitHub页面了解有关如何安装和使用此图表库的更多信息。价格：免费（有麻省理工学院许可）原标题：Top6JavaScriptFamilyTreeDiagramLibraries，作者：IvanPetrenko
