DHTMLX Diagram v3.1：新增可自定义思维导图形状、时间处理程序等！

DHTMLX Diagram已更新至版本3.1。我们已经将来自JavaScript图表组件的用户的大量反馈整合到了发行版中。现在，您可以创建和自定义思维导图，通过思维导图编辑器即时对其进行编辑，微调每个形状的工具栏，并将自定义事件处理程序添加到自定义形状。此外，可以使用内置的类型定义来帮助您更快地对图进行编码。

想要购买

全新思维导图

DHTMLX Diagram3.1的主要引入了一种新的图表类型-思维导图。思维导图用于可视化信息，具有从核心思想中分支出来的多个按层次排列的概念。此图类型可应用于构建业务，科学，技术和任何其他类型的数据。

由于专用于思维导图的新型形状称为“主题”形状，因此现在可以使用DHTMLX图库创建思维导图。它们是DHTMLX思维导图中默认的形状类型。

该库的API允许根据您的要求配置主题形状。您可以调整形状的大小，偏移量，背景和边框颜色，文本修饰和对齐方式，以及将自己的CSS类应用于形状。

要按照正确的层次结构顺序排列形状，可以通过父级配置属性指定每个形状的父级ID，也可以使用连接器对象的配置属性将形状彼此链接。使用连接器对象的from和to属性，您可以定义与特定连接器链接的形状。此外，您可以借助可选的type属性选择连接器是虚线还是实线：

const data = [       // shapes    { id: "1", text: "49 emotions" },    { id: "2", text: "Positive and lively" },    { id: "3", text: "Quiet positive" },    { id: "4", text: "Caring" },    { id: "5", text: "Reactive" },    // connectors    { "id": "1-2", "from": "1", "to": "2", "type": "dash" },    { "id": "1-3", "from": "1", "to": "3", "type": "dash" },    { "id": "1-4", "from": "1", "to": "4", "type": "line" },    { "id": "1-5", "from": "1", "to": "5", "type": "line" },];

虽然实线是默认的连接器类型，但是您可以通过图表对象的defaultLinkType属性对其进行更改：

const diagram = new dhx.Diagram(document.body, {    type: "mindmap",    defaultLinkType: "line"});

DHTMLX思维导图提供了将子形状布置在根形状的右侧和左侧的机会。为此，我们引入了typeConfig选项，该选项确定思维导图分支的方向。typeConfig选项的direction属性可以设置为left或right：

const diagram = new dhx.Diagram(document.body, {    type: "mindmap",    typeConfig: {        direction: "right",    }});diagram.data.parse(data);

如果要在左侧放置一些形状，而在右侧放置一些形状，则可以使用typeConfig对象的side属性。所述侧属性允许指示哪些形状要被绘制到左和到根形状的通过指定它们的ID的权利：

const diagram = new dhx.Diagram(document.body, {    type: "mindmap",    typeConfig: {        side: {            left: ["2", "3"],            right: ["4", "5"],        }    }});diagram.data.parse(data);

配置思维导图时，您还可以决定要显示和隐藏哪些子形状。在开放的属性显示孩子塑造一个特定父形状是的真实默认。借助openDir属性，您可以更精确地指定是在父形状的左侧还是右侧显示子形状：

const data = [    {        "id": "1", "text": "49 emotions",        "openDir": {            left: true,            right: false,        }    },    { "id": "2", "text": "Positive and lively", "parent": "1" },    { "id": "3", "text": "Quiet positive", "parent": "1" },    { "id": "4", "text": "Caring", "parent": "1" },    { "id": "5", "text": "Reactive", "parent": "1" },];

思维导图中的自定义形状

DHTMLX图库使在一个图中混合各种形状成为可能。因此，您可以创建一个思维导图并向其中添加组织结构图形状或任何其他图形状。您需要做的就是在形状配置对象中指定所需的形状类型：

const data = [    // create an "img-card" shape of Org Chart with the related configuration    { id: "1", text: "Chairman & CEO", type: "img-card", img: "../avatar-06.jpg" },    // create default "topic" shapes of Mind Map    { id: "2", text: "Manager", parent: "1" },    { id: "2.1", text: "Marketer", parent: "2" },    { id: "2.2", text: "Team Lead ", parent: "2" },    // more options];// initializing the mind mapconst diagram = new dhx.Diagram(document.body, {    type: "mindmap",});diagram.data.parse(data);

您还可以通过图的defaultShapeType配置选项更改形状的默认类型。新的默认类型将应用于所有形状，但在形状配置对象中指定了其他类型的形状除外：

const diagram = new dhx.Diagram(document.body, {    type: "mindmap",    defaultShapeType: "rectangle"});const data = [    { id: "1", text: "Chairman & CEO", type: "card" },     { id: "2", text: "Manager", parent: "1" },    { id: "3", text: "Technical Director", parent: "1" },    { id: "4", text: "CCO", parent: "1" },    { id: "5", text: "Product Manager", parent: "1" }];

此外，您可以通过addShape（）方法添加自定义形状并将其设置为默认形状，从而创建一个完全自定义的思维导图。在下面的示例中，我们创建了一个带有目标网页预览的站点地图，而不是主题形状和形状中的自定义HTML内容：icon（打开一个弹出窗口），带有嵌入到目标网页的链接的图标以及自定义文本（当用户点击一个形状：

const diagram = new dhx.Diagram(document.body, {    type: "mindmap",    // specifies the new shape type as a type for all shapes    defaultShapeType: "flowView"});function template({ title, view, cr, br, conversion, link }){    ...}function openModalInfo(title, text) {     ...}diagram.addShape("flowView", {    template: template,    eventHandlers: {        onclick: {            info: function(event, item) {                openModalInfo(item.title, item.info);            }        }    }});const customShape = [    // an appropriate data set];diagram.data.parse(customShape);

在DHTMLX模板集合中，可以将此自定义思维导图用作CSS模板。

思维导图编辑器

伴随引入全新的图表类型，DHTMLX图表获得了一个专门用于处理思维导图的新编辑器。在编辑器提供了所有的图中可用的可能性和组织结构图编辑器。它有两个面板：一个在编辑区域的顶部，另一个在编辑区域的右侧。

为了创建思维导图编辑器，您需要在编辑器配置对象中指定编辑器类型：

var editor = new dhx.DiagramEditor(document.body, {    type: "mindmap"});

广泛的API属性使您可以配置编辑器以满足您的需求。您可以操纵编辑器控件，此外，还可以自定义右侧面板以为其配备必要的编辑选项。当您要编辑自定义思维导图时（如下面的示例），它可能特别有用。

编辑器中的自定义形状工具栏

从v3.1开始，您可以在所有DHTMLX图表编辑器中自定义每个形状的工具栏。

对于思维导图编辑器，默认工具栏由四个控件组成，这些控件用于添加新的子形状，在根形状的右侧和根形状的左侧创建新形状，以及删除形状。

为了使自定义成为可能，我们添加了shapeToolbar配置属性，该属性允许操作工具栏控件并创建自定义控件。如果将此属性指定为true，则工具栏将包含所有特定于您使用的编辑器的默认控件。要修改工具栏，您可以通过shapeToolbar属性仅包含所需的那些控件。指定控件的顺序决定了它们在工具栏中的显示方式。

在下面的示例中，我们在工具栏中保留了两个控件：一个用于删除形状，另一个用于添加形状。

const editor = new dhx.DiagramEditor(document.body, {    type: "mindmap",    shapeToolbar: ["remove", "add"]});

您不仅可以通过重新排列或禁用某些控件来微调工具栏，还可以添加自定义控件。向工具栏添加自定义控件的最佳方法是通过将shapeToolbar属性指定为true并在shapeToolbar数组中设置图标对象来启用工具栏的默认配置。图标对象包含图标的ID和图标的HTML内容：

const editor = new dhx.DiagramEditor(document.body, {    type: "mindmap",    shapeToolbar: [  true,{ id: "download", content:"<i class='dxi dxi-download'></i>" }     ]});

因此，v3.1使您能够完全控制所有编辑器（图表，组织结构图和思维导图）中每个形状的工具栏的配置，并使您能够广泛地自定义编辑器。

自定义事件处理程序

从现在开始，DHTMLX Diagram由于能够添加自定义事件处理程序，因此能够处理具有自定义形状的用户交互。为此，我们引入了addShape（）方法的新>eventHandlers属性。

在下面的示例中，我们添加了一个事件处理程序，以侦听带有info类的图标的点击，之后将打开一个模式窗口：

diagram.addShape("template", {    template: template,    defaults: {        height: 190,        width: 97    },    eventHandlers: {        onclick: {            info: function(event, item) {                openModalInfo(item.title, item.info);            }        }    }});

TypeScript支持

锦上添花的是DHTMLX Diagram库从v3.1开始提供的TypeScript支持。从现在开始，您可以依靠内置的类型定义，并应用类型建议，类型检查和自动补全功能，以加快编码速度并使代码整洁而稳定。

其他功能和更新

该版本带来了编辑器对象的新事件：BeforeShapeIconClick和AfterShapeIconClick，BeforeShapeMove和AfterShapeMove。它们用于跟踪用户操作，例如单击每个形状的工具栏控件和移动形状。

当通过导出服务导出图表时，V3.1还提供了控制图表CSS样式的功能。从现在开始，您可以禁用CSS样式的导出，或者仅包括将它们与图表一起导出所需的样式。

我们渴望为您提供完整的工具包，以创建思维导图并对其进行自定义以满足您的需求。如有任何疑问，请随时将您的反馈和问题发送给我们。

想要购买dhtmlxDiagram正版授权，或了解APS系统请点击【咨询在线客服】

标签：

来源：慧都