DHTMLX 开发团队通过我们的 JavaScript 库的新版本继续为您的编码效率做出贡献。这一次，我们很高兴地展示 DHTMLX Diagram v5.0。主要更新带来了一系列功能，主要集中在使用 DHTMLX 图表编辑器优化您的数据可视化体验。它是我们JavaScript 图表库的辅助工具，经常被证明是支持我们产品的决定性因素。

在 v5.0 中，您会发现一种新的径向自动布局算法、用于节省时间的形状样式化的键盘快捷键、用于分布和对齐形状的多个选项、用于排列图表项目的对齐线以及改进的网格区域的可用性。除此之外，还有一个新的现场示例生动地展示了使用 DHTMLX 图表编辑器构建艾森豪威尔矩阵的可能性。

试用新版 dhtmlxDiagram >

让我们深入了解此版本的详细信息。

径向自动布局算法

自动布局算法是在我们的 JavaScript 图表库的默认模式以及 2020 年的编辑器中引入的。这个功能受到了极大的欢迎，因为它允许将任意数量的随机链接形状快速转换为美观的层次结构。在新版本中，我们通过新的自动放置选项扩展了此功能。如果早些时候您可以仅正交（即沿垂直和水平线）自动放置形状，现在还可以按径向（树状）顺序组织数据。

使用径向自动布局算法，所有形状都将在围绕根形状的假想同心圆上均匀分布。此形状由最大连接数决定。径向布局样式对于显示和分析大型层次结构看起来更加紧凑和实用。

以编程方式，您可以通过新的placeMode参数指定形状的径向排列。此参数采用两个值之一来设置所需的形状排列：

1. 正交（默认），

2. 径向的。

鉴于我们的图表组件使您能够使用autoPlace()方法或autoplacement属性配置自动布局算法，我们为它们添加了新参数。

const diagram = new dhx.Diagram("diagram_container");
diagram.data.parse(data);

diagram.autoPlace({
   mode: "edges",
   placeMode: "radial"
});

在图表编辑器中，您可以使用 autoplacement 属性的 placeMode 参数以径向顺序排列形状。在处理大量形状时，算法还会在 50% 到 100% 的范围内自动改变比例，使整个结构可见。

const editor = new dhx.DiagramEditor(document.body, {
    type: "default",
    scale: 0.8,
    autoplacement: {
        mode: "direct",
        placeMode: "radial",
    }
});

请记住，形状的径向排列可能看起来不同，具体取决于连接线的指定模式（“直接”或“边缘”）。

更快的形状造型

通常情况下，许多（如果不是全部）形状应该调整为相同的样式模式。以前，当使用我们的图表编辑器构建各种图表和图表时，最终用户经常不得不花费大量时间来逐个修改形状的外观和感觉。但幸运的是，这不再是一个问题。

从 v5.0 开始，图表编辑器使最终用户可以使用热键组合将一个形状的样式设置应用于另一个形状或一组形状。您所要做的就是选择具有所需外观的形状，复制其设置 (Alt(Option)+Ctrl(Cmd)+С)，然后将 (Alt(Option) + Ctrl (Cmd) + V) 粘贴到目标中形状。此功能在图表编辑器的所有三种模式（默认、组织结构图、思维导图）中均可用。

形状的组分布和对齐

自动布局算法是对图表编辑器的一个很好的补充，旨在加快图表结构的形成。但我们也希望确保最终用户能够以最大的便利自行完成工作。

因此，在这个主要版本中，我们提供了几种新的工具来执行不同的形状操作。首先，我们想提一下在图表编辑器的默认模式下同时对齐一组形状并均匀分布它们的机会。选择多个形状时，所有对齐和分配控件将显示在弹出工具栏中。

选定的形状组可以以六种不同的方式对齐：

1. 左对齐，

2. 对齐水平中心，

3. 对齐，

4. 对齐顶部，

5. 对齐垂直中心，

6. 对齐底部。

至于分布功能，它允许水平和垂直均匀分布形状。

同时需要提到的是，在泳道或组中放置形状时，组分布和对齐功能不可用。

捕捉线

v5.0 中为图表编辑器提供的另一项新功能是使用对齐线的能力。此功能在默认模式下可用，当最终用户决定手动排列图表形状时非常有用。

它在实践中如何运作？沿网格区域移动特定图表形状时，当移动形状的中心或极端横向坐标与静态形状的坐标匹配时，最终用户将看到对齐线。因此，在编辑器中以最高精度手动相对于彼此定位形状将变得更加容易。

从现在开始，此功能将默认启用，并带有新添加的磁性。您可以通过属性的两个可选参数更改捕捉线的外观：

1. lineWidth – 设置线条的宽度，

2. lineColor – 设置线条的颜色。

默认配置如下：

magnetic: {
   lineWidth: 2,
   lineColor: "#000",
}

要禁用此功能，您应该将磁属性的值设置为false。

其他改进

除了上述主要功能之外，v5.0 中还有一些小更新值得一提。我们更新了编辑器中的网格步骤属性。此功能有助于以更平滑的方式重新定位网格中的选定项目（形状、组、泳道）。现在，当您更改网格步长的值时，网格区域中点之间的距离（影响您沿网格移动形状的方式）将相应更改。

我们用新的工具提示参数对图表 API 中工具栏属性的图标对象进行了补充，该参数允许使用文本标签澄清出现在形状的个人工具栏中的所有图标。此参数也已添加到图表编辑器中shapeToolbar属性的图标对象，使您能够将工具提示添加到自定义工具栏控件。此外，还有新的语言环境选项可用于将每项工具栏中的工具提示调整为任何语言。

图表和编辑器不再支持lineGap属性。相反，lineConfig 属性中有一个新的lineGap参数。

我们丰富了我们在 DHTMLX 图表编辑器中构建的实时样本集合。这是艾森豪威尔矩阵的一个示例——一种用于确定工作优先级的流行工具。

最后，您可以通过下载30 天免费试用版来测试此主要更新中提供的所有功能。

如果您想分享您对此版本的印象或关于如何进一步改进 DHTMLX 图表库的新想法，请联系在线客服。