首页 > 编程语言 >【JavaScript脚本宇宙】打造完美用户体验：必备JS图形库指南

【JavaScript脚本宇宙】打造完美用户体验：必备JS图形库指南

时间：2024-06-30 21:28:05浏览次数：19  
标签：draw2d graph JavaScript JS jsPlumb go 图形库 new 节点

探索顶尖JavaScript图形库：从jsPlumb到mxGraph

前言

在现代的Web开发中，交互式图形和数据可视化库成为了不可或缺的工具。这些库不仅提供了丰富的功能，还大大简化了开发人员的工作流程。本文将介绍和比较六个流行的JavaScript图形和数据可视化库：jsPlumb、GoJS、draw2d、Cytoscape.js、JointJS以及mxGraph。通过对它们的主要特点、安装及设置、基本功能和高级使用进行详细讨论，帮助读者更好地理解这些库的优势和适用场景。

欢迎订阅专栏：JavaScript脚本宇宙

文章目录

1. jsPlumb：一个用于创建拖放连接的JS库

1.1 概述

jsPlumb 是一个非常强大的 JavaScript 库，用于创建基于 HTML5 的拖放连接。这个库可以帮助开发者轻松地在网页上实现元素之间的连线和交互功能。

1.1.1 主要特点
  • 简单易用：提供了直观的API，便于快速上手。
  • 高度可定制：支持丰富的配置选项，可根据需求自定义外观和行为。
  • 跨浏览器兼容：支持主流浏览器，包括 Chrome、Firefox、Safari 和 Edge。
  • 事件驱动：提供全面的事件处理机制，可以捕获并响应用户操作。
1.1.2 使用场景
  • 流程图设计：例如工作流管理系统中的流程设计模块。
  • 数据关系图：例如数据库 ER 图、网络拓扑结构图。
  • UI 组件交互：例如图形化编程工具中的节点连接。

更多详情请参考 jsPlumb 官网.

1.2 安装与设置

1.2.1 安装步骤

你可以通过 npm 或直接使用 CDN 来安装 jsPlumb：

npm install jsplumb

或者直接在 HTML 文件中引入：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jsPlumb/2.14.6/js/jsplumb.min.js"></script>
1.2.2 配置方法

基本的配置示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jsPlumb 示例</title>
    <style>
        .window {
            width: 100px;
            height: 100px;
            border: 1px solid black;
            position: absolute;
        }
    </style>
</head>
<body>
    <div id="item_left" class="window" style="left: 50px; top: 50px;"></div>
    <div id="item_right" class="window" style="left: 250px; top: 50px;"></div>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jsPlumb/2.14.6/js/jsplumb.min.js"></script>
    <script>
        jsPlumb.ready(function() {
            jsPlumb.addEndpoint('item_left', { anchors: ['RightMiddle'] }, { isSource: true, isTarget: false });
            jsPlumb.addEndpoint('item_right', { anchors: ['LeftMiddle'] }, { isSource: false, isTarget: true });
            jsPlumb.connect({ source: 'item_left', target: 'item_right' });
        });
    </script>
</body>
</html>

1.3 基本功能

1.3.1 拖放功能

实现拖放功能的示例代码：

jsPlumb.draggable("item_left");
jsPlumb.draggable("item_right");
1.3.2 连接线样式

配置连接线样式：

jsPlumb.connect({
    source: 'item_left',
    target: 'item_right',
    paintStyle: { stroke: "blue", strokeWidth: 3 },
    endpoint: "Rectangle",
    connector: ["Bezier", { curviness: 150 }]
});
1.3.3 端点配置

配置端点：

const common = {
    isSource: true,
    isTarget: true,
    connector: ["Straight"],
    endpoint: "Dot",
    anchor: "AutoDefault",
};

jsPlumb.addEndpoint('item_left', common);
jsPlumb.addEndpoint('item_right', common);
1.3.4 事件处理

处理连接事件：

jsPlumb.bind("connection", function(info) {
    console.log("Connected from " + info.sourceId + " to " + info.targetId);
});

1.4 高级使用

1.4.1 动态操作

动态添加和移除连接：

// 动态添加连接
jsPlumb.connect({ source: "item_left", target: "item_right" });

// 移除连接
jsPlumb.deleteConnection(jsPlumb.getConnections({source: "item_left"})[0]);
1.4.2 集成与扩展

将 jsPlumb 与其他库集成，例如 jQuery:

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
    $(document).ready(function() {
        jsPlumb.draggable($('.window'));
    });
</script>
1.4.3 性能优化

对于大量节点和连接的性能优化：

jsPlumb.importDefaults({
    ConnectionsDetachable: false,
    ReattachConnections: false,
    MaxConnections: -1,
});

更多关于 jsPlumb 的详细信息和高级使用，请参阅 jsPlumb Documentation.

2. GoJS：一个用于创建交互图的JavaScript库

2.1 概述

GoJS 是一个强大的 JavaScript 库，用于在 web 应用程序中创建各种类型的交互式图形和图表。无论是流程图、组织结构图还是其他复杂的图形，GoJS 都能提供灵活且高效的解决方案。

2.1.1 主要特点
  • 高度可自定义：用户可以根据需求定制节点、链接和布局。
  • 支持多种图形类型：包括流程图、树状图、网络拓扑图等。
  • 事件处理：可以方便地处理各种用户交互事件，如点击、拖拽等。
  • 数据绑定：支持与后端数据的双向绑定，实现动态更新。
  • 优秀的性能：适用于大规模数据图形的渲染。
2.1.2 使用场景
  • 业务流程管理：用于绘制和管理业务流程图。
  • 网络管理：展示和管理网络拓扑结构。
  • 组织结构图：展示公司或团队的组织架构。
  • 思维导图：用于个人或团队的头脑风暴和想法整理。

2.2 安装与设置

2.2.1 安装步骤

你可以使用 npm 或者直接引用 CDN 链接来安装 GoJS。

使用 npm 安装：

npm install gojs

或者通过 CDN 引用：

<script src="https://unpkg.com/gojs/release/go.js"></script>
2.2.2 配置方法

在 HTML 文件中引入 GoJS 并初始化一个基础图：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>GoJS Example</title>
    <script src="https://unpkg.com/gojs/release/go.js"></script>
    <style>
        #myDiagramDiv {
            width: 600px;
            height: 400px;
            border: 1px solid black;
        }
    </style>
</head>
<body>
    <div id="myDiagramDiv"></div>
    <script>
        const $ = go.GraphObject.make;
        const myDiagram = $(go.Diagram, "myDiagramDiv");

        // 添加节点和链接的模板
        myDiagram.nodeTemplate =
            $(go.Node, "Auto",
                $(go.Shape, "RoundedRectangle", { strokeWidth: 0 },
                    new go.Binding("fill", "color")),
                $(go.TextBlock,
                    { margin: 8 },
                    new go.Binding("text", "key"))
            );

        myDiagram.model = new go.GraphLinksModel(
            [
                { key: "Alpha", color: "lightblue" },
                { key: "Beta", color: "orange" }
            ],
            [
                { from: "Alpha", to: "Beta" }
            ]);
    </script>
</body>
</html>

2.3 基本功能

2.3.1 节点与链接

节点和链接是构成图的基本元素。以下是如何定义和使用节点与链接的实例代码：

const nodeTemplate =
    $(go.Node, "Auto",
        $(go.Shape, "RoundedRectangle", { strokeWidth: 0 },
            new go.Binding("fill", "color")),
        $(go.TextBlock,
            { margin: 8 },
            new go.Binding("text", "key"))
    );

const linkTemplate =
    $(go.Link,
        $(go.Shape),
        $(go.Shape, { toArrow: "Standard" })
    );

myDiagram.nodeTemplate = nodeTemplate;
myDiagram.linkTemplate = linkTemplate;

myDiagram.model = new go.GraphLinksModel(
    [
        { key: "Start", color: "green" },
        { key: "Middle", color: "yellow" },
        { key: "End", color: "red" }
    ],
    [
        { from: "Start", to: "Middle" },
        { from: "Middle", to: "End" }
    ]
);
2.3.2 布局管理

GoJS 提供了多种布局方式，包括树形布局、层次布局等。

myDiagram.layout = $(go.TreeLayout, { angle: 90, layerSpacing: 35 });
2.3.3 数据绑定

GoJS 支持数据绑定，可以使图形与数据模型同步更新。

myDiagram.model = new go.GraphLinksModel(
    [
        { key: "Node1", color: "lightblue" },
        { key: "Node2", color: "orange" }
    ],
    [
        { from: "Node1", to: "Node2" }
    ]
);
2.3.4 事件处理

GoJS 提供了丰富的事件处理机制，可以响应用户的各种操作。

myDiagram.addDiagramListener("ObjectSingleClicked",
    function (e) {
        let part = e.subject.part;
        if (!(part instanceof go.Link)) alert("Clicked on " + part.data.key);
    });

2.4 高级使用

2.4.1 自定义组件

你可以根据需要自定义节点、链接以及其他组件的外观和行为。

myDiagram.nodeTemplate =
    $(go.Node, "Spot",
        $(go.Panel, "Auto",
            $(go.Shape, "Circle", { width: 50, height: 50, fill: "white" }),
            $(go.TextBlock,
                new go.Binding("text", "key"))
        ),
        $("Button",
            { alignment: go.Spot.BottomRight },
            $(go.Shape, { figure: "PlusLine", width: 10, height: 10 }),
            { click: addNewNode })
    );

function addNewNode(e, button) {
    var diagram = button.part.diagram;
    diagram.startTransaction("add node");
    diagram.model.addNodeData({ key: "New Node" });
    diagram.commitTransaction("add node");
}
2.4.2 动画效果

GoJS 支持动画效果，可以使图形的展示更加生动。

myDiagram.animationManager.isEnabled = true;
myDiagram.model = new go.GraphLinksModel(
    [
        { key: "Animated Node 1", color: "lightgreen" },
        { key: "Animated Node 2", color: "pink" }
    ],
    [
        { from: "Animated Node 1", to: "Animated Node 2" }
    ]
);
2.4.3 性能优化

对于大型数据集，可以采用分块加载、简化样式等方式进行性能优化。

myDiagram.initialAutoScale = go.Diagram.Uniform;  // 自动适应视窗大小
myDiagram.layout = $(go.ForceDirectedLayout, { defaultSpringLength: 50, defaultElectricalCharge: 50 });
myDiagram.undoManager.isEnabled = true;

// 批量操作以提高性能
myDiagram.startTransaction("batch update");
// 执行大量节点和链接添加操作
myDiagram.commitTransaction("batch update");

更多详细内容请参考 GoJS 官方文档。

3. draw2d：一个专业的绘图和流程图库

3.1 概述

draw2d 是一个强大且灵活的 JavaScript 库，用于创建交互式的2D图形和流程图。它被广泛应用于各类网页与应用程序中，以提供专业级的可视化解决方案。

3.1.1 主要特点
  • 易于使用：提供简单易用的 API，快速上手。
  • 高性能：使用 HTML5 Canvas 提供高效的图形绘制。
  • 丰富的组件：内置多种图形组件，如矩形、圆形、连接线等。
  • 拖放支持：支持节点的拖放与连接操作。
  • 可扩展性：支持自定义符号与属性编辑。
3.1.2 使用场景
  • 流程图设计：用于创建复杂的业务流程与工作流。
  • 网络拓扑图：用于展示网络设备及其连接关系。
  • 图形编辑器：用于构建自定义的图形编辑工具。
  • 数据可视化：用于展示各种数据的可视化图表。

3.2 安装与设置

3.2.1 安装步骤

要在项目中使用 draw2d，可以通过 npm 安装：

npm install draw2d

或者直接通过 CDN 引入：

<script src="https://cdn.rawgit.com/freegroup/draw2d/master/dist/draw2d.js"></script>
3.2.2 配置方法

安装完成后，需要在 HTML 页面中初始化 draw2d 环境：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Draw2d Example</title>
    <script src="https://cdn.rawgit.com/freegroup/draw2d/master/dist/draw2d.js"></script>
</head>
<body>
    <div id="canvas" style="width:800px;height:600px;border:1px solid black;"></div>
    <script>
        let canvas = new draw2d.Canvas("canvas");
    </script>
</body>
</html>

3.3 基本功能

3.3.1 图形绘制

draw2d 支持绘制各种基本图形，例如矩形、圆形等。以下是绘制一个矩形的示例代码：

let rect = new draw2d.shape.basic.Rectangle();
rect.setDimension(100, 60);
rect.setPosition(50, 50);
canvas.add(rect);
3.3.2 拖放与连接

draw2d 提供了方便的拖放与连接功能，使得节点之间的交互变得简单直观。下面是一个实现节点连接的示例：

let rect1 = new draw2d.shape.basic.Rectangle({x: 100, y: 100, width: 100, height: 60});
let rect2 = new draw2d.shape.basic.Rectangle({x: 300, y: 100, width: 100, height: 60});

canvas.add(rect1);
canvas.add(rect2);

let connection = new draw2d.Connection();
connection.setSource(rect1.getOutputPort(0));
connection.setTarget(rect2.getInputPort(0));
canvas.add(connection);
3.3.3 属性编辑

draw2d 提供了对图形对象属性的编辑功能，例如修改颜色、大小等属性：

rect1.setBackgroundColor("#FF0000");
rect2.setStroke(2);
rect2.setColor("#00FF00");

3.4 高级使用

3.4.1 自定义符号

draw2d 支持用户自定义符号，以下是创建一个自定义符号的示例：

let MyCustomShape = draw2d.shape.basic.Rectangle.extend({
    init: function(attr) {
        this._super($.extend({bgColor:"#0000FF", width:120, height:70}, attr));
        this.createPort("input");
        this.createPort("output");
    }
});

let customShape = new MyCustomShape({x: 200, y: 200});
canvas.add(customShape);
3.4.2 集成与扩展

draw2d 可以与其他前端框架或库进行集成，例如 React 或 Angular。以下是与 React 的简单集成示例：

import React, { useEffect } from 'react';
import draw2d from 'draw2d';

const Draw2dCanvas = () => {
    useEffect(() => {
        let canvas = new draw2d.Canvas("canvas");

        let rect = new draw2d.shape.basic.Rectangle();
        rect.setDimension(100, 60);
        rect.setPosition(50, 50);
        canvas.add(rect);

    }, []);

    return <div id="canvas" style={{ width: '800px', height: '600px', border: '1px solid black' }}></div>;
};

export default Draw2dCanvas;
3.4.3 性能优化

对于大型图形应用，可以通过一些技巧提升 draw2d 的性能，例如减少重绘次数、使用分层渲染等：

canvas.on("add", function(emitter, figure){
    // Disable automatic repainting
    canvas.preventRepaint();

    // Add your figures and connections here

    // Re-enable painting and force a complete repaint
    canvas.allowRepaint();
    canvas.repaint();
});

更多信息请参考 draw2d 官方文档

4. Cytoscape.js：一个用于可视化数据库图的JavaScript库

4.1 概述

Cytoscape.js 是一个用于图形理论（graph theory）建模和可视化的开源 JavaScript 库。它适用于需要对节点和边进行丰富交互和动态展示的应用场景。

4.1.1 主要特点
  • 高度灵活: 支持多种布局和样式。
  • 高性能: 能处理大量节点和边的复杂网络图。
  • 可扩展性强: 提供丰富的插件，支持定制开发。
  • 跨平台: 可运行于所有现代浏览器环境中，包括移动端。

官网链接：Cytoscape.js 官网

4.1.2 使用场景
  • 社交网络分析：如用户关系图谱。
  • 生物信息学：如基因序列网络图。
  • 知识图谱：如概念间关联的可视化展示。
  • 数据库关系图：用于展示数据库中表与表之间的关系。

4.2 安装与设置

4.2.1 安装步骤

可以通过 npm 或直接在 HTML 文件中引入 CDN 链接来安装 Cytoscape.js。

  • 使用 npm 安装：

    npm install cytoscape

  • 使用 CDN 安装：

    <script src="https://unpkg.com/[email protected]/dist/cytoscape.min.js"></script>
4.2.2 配置方法

以下是一个基本的配置示例，展示如何初始化 Cytoscape.js 并创建一个简单的图。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Cytoscape.js 示例</title>
    <script src="https://unpkg.com/[email protected]/dist/cytoscape.min.js"></script>
</head>
<body>
    <div id="cy" style="width: 600px; height: 600px;"></div>
    <script>
        var cy = cytoscape({
            container: document.getElementById('cy'), // 图所在的HTML元素
            elements: [ // 定义节点和边
                { data: { id: 'a' } },
                { data: { id: 'b' } },
                { data: { id: 'ab', source: 'a', target: 'b' } }
            ],
            style: [ // 样式定义
                {
                    selector: 'node',
                    style: {
                        'background-color': '#666',
                        'label': 'data(id)'
                    }
                },
                {
                    selector: 'edge',
                    style: {
                        'width': 3,
                        'line-color': '#ccc'
                    }
                }
            ],
            layout: {
                name: 'grid',
                rows: 1
            }
        });
    </script>
</body>
</html>

4.3 基本功能

4.3.1 网络图绘制

Cytoscape.js 提供了多种方式来绘制网络图，可以通过简单的数据结构定义节点和边。例如：

let cy = cytoscape({
    container: document.getElementById('cy'),
    elements: [
        { data: { id: 'node1' } },
        { data: { id: 'node2' } },
        { data: { id: 'edge1', source: 'node1', target: 'node2' } }
    ]
});
4.3.2 布局算法

Cytoscape.js 支持多种布局算法，如 grid、circle、concentric 等。可以根据需求选择合适的布局。

cy.layout({
    name: 'circle'
}).run();
4.3.3 样式定制

Cytoscape.js 提供了灵活的样式定制功能，可以通过 CSS-like 的语法来定义节点和边的样式。

cy.style()
    .selector('node')
    .style({
        'background-color': '#666',
        'label': 'data(id)'
    })
    .selector('edge')
    .style({
        'width': 3,
        'line-color': '#ccc'
    })
    .update();

4.4 高级使用

4.4.1 动态更新

可以动态添加或移除节点和边，实时更新图的内容。

// 添加节点
cy.add([
    { group: "nodes", data: { id: "node3" } },
    { group: "edges", data: { id: "edge2", source: "node2", target: "node3" } }
]);

// 移除节点
cy.remove(cy.$('#node1'));
4.4.2 插件扩展

Cytoscape.js 具有丰富的插件生态，可以用插件来扩展其功能。例如使用 cytoscape-cola 插件实现力导向布局：

npm install cytoscape-cola

const cola = require('cytoscape-cola');
cytoscape.use(cola);

cy.layout({
    name: 'cola'
}).run();
4.4.3 性能优化

对于大型图，可通过启用批处理和减少 DOM 操作来提升性能。

cy.batch(() => {
    // 一次性执行多个操作
    cy.add([{ data: { id: 'node4' } }]);
    cy.remove(cy.$('#node2'));
});

更多性能优化技巧可以参考 Cytoscape.js 官方文档。

5. JointJS：一个强大的JavaScript图形库

5.1 概述

JointJS 是一个现代的JavaScript库，用于创建交互式图表和流程图。它基于SVG和HTML5，提供了高度可定制的API，使得开发者可以轻松地在网页应用中集成复杂的图形。

5.1.1 主要特点
  • 高扩展性：支持自定义元素、链接和样式。
  • 交互性强：内置拖放、缩放、平移等交互功能。
  • 跨平台兼容：兼容主流浏览器，并支持移动设备。
5.1.2 使用场景
  • 流程图设计：用于绘制复杂的业务流程图。
  • 网络拓扑：展示网络结构和节点关系。
  • 电路图：用于电子工程中的电路设计。
  • 任务管理：可视化任务和依赖关系。

5.2 安装与设置

5.2.1 安装步骤

你可以通过npm或CDN来安装JointJS：

使用npm安装：

npm install jointjs

或者通过CDN引入：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jointjs/3.5.6/joint.min.js"></script>
5.2.2 配置方法

安装完毕后，可以通过以下方式在项目中引入并初始化JointJS：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JointJS Demo</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jointjs/3.5.6/joint.min.css">
</head>
<body>
    <div id="paper"></div>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.21/lodash.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.4.0/backbone-min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jointjs/3.5.6/joint.min.js"></script>
    <script>
        var graph = new joint.dia.Graph();
        var paper = new joint.dia.Paper({
            el: document.getElementById('paper'),
            model: graph,
            width: 800,
            height: 600,
            gridSize: 10
        });
    </script>
</body>
</html>

5.3 基本功能

5.3.1 节点与连线

以下是创建节点和连接线的一段示例代码：

var rect = new joint.shapes.standard.Rectangle();
rect.position(100, 30);
rect.resize(100, 40);
rect.attr({
    body: {
        fill: 'blue'
    },
    label: {
        text: 'Hello',
        fill: 'white'
    }
});
rect.addTo(graph);

var circle = new joint.shapes.standard.Circle();
circle.position(300, 30);
circle.resize(100, 40);
circle.attr({
    body: {
        fill: 'green'
    },
    label: {
        text: 'World',
        fill: 'white'
    }
});
circle.addTo(graph);

var link = new joint.shapes.standard.Link();
link.source(rect);
link.target(circle);
link.addTo(graph);
5.3.2 拖放与调整

JointJS 提供了简单的拖放和大小调整功能：

paper.on('element:pointerdown', function(elementView) {
    elementView.model.translate(20, 20);
});

var halo = new joint.ui.Halo({ cellView: elementView });
halo.render();
5.3.3 自定义样式

你可以通过CSS或直接在JavaScript代码中自定义元素的样式：

rect.attr({
    body: {
        fill: 'blue',
        stroke: 'black',
        strokeWidth: 2
    },
    label: {
        text: 'Custom',
        fill: 'white'
    }
});

5.4 高级使用

5.4.1 图表转换

JointJS 支持将图表导出为多种格式，例如PNG、JPEG等：

paper.toPNG(function(dataURL) {
    var img = document.createElement('img');
    img.src = dataURL;
    document.body.appendChild(img);
});
5.4.2 动态交互

通过事件监听，你可以实现更复杂的动态交互：

graph.on('change:position', function(cell) {
    console.log('The element moved to:', cell.get('position'));
});
5.4.3 性能优化

对于大规模图表，性能优化非常重要，可以通过以下方法提升性能：

  • 批量操作：尽可能减少DOM操作次数。
  • 虚拟滚动：只渲染可见区域的元素。
  • 缓存计算：避免重复计算位置和尺寸。

更多详情请访问 JointJS 官网。

6. mxGraph：一个轻量级的图形库

6.1 概述

mxGraph是一个轻量级、易于使用的JavaScript图形库，用于创建和操作图形。它广泛应用于流程图、网络图和其他需要可视化表示的场景。

6.1.1 主要特点
  • 跨平台：支持所有主流浏览器，包括Chrome、Firefox、Safari等。
  • 高性能：在处理大量节点和连接时表现出色。
  • 灵活性：支持自定义节点、样式和布局。
  • 易用性：提供丰富的API，便于开发者快速上手。
6.1.2 使用场景
  • 流程图设计：例如业务流程、工作流程等。
  • 网络拓扑图：网络设备、服务器等的关系图。
  • 组织结构图：公司内部的组织层级图。
  • UML图：用于描述系统架构的各种UML图。

6.2 安装与设置

6.2.1 安装步骤

首先，可以从官方GitHub仓库下载mxGraph的代码，并将其引入到你的项目中。

<script type="text/javascript" src="path/to/mxClient.js"></script>

或者，你可以使用npm进行安装：

npm install mxgraph
6.2.2 配置方法

在引入mxGraph后，需要进行一些基本的初始化配置：

const container = document.getElementById('graphContainer');
const graph = new mxGraph(container);

你还可以设置一些基本的图形属性，例如禁用橡皮筋选择：

mxGraph.prototype.isRubberbandSelectionEnabled = function () {
    return false;
};

6.3 基本功能

6.3.1 图形绘制

以下是一个简单的图形绘制示例：

// 创建一个图形容器
const container = document.getElementById('graphContainer');

// 初始化mxGraph
const graph = new mxGraph(container);

// 开始事务
graph.getModel().beginUpdate();
try {
    // 插入顶点
    const parent = graph.getDefaultParent();
    const vertex1 = graph.insertVertex(parent, null, 'Hello', 20, 20, 80, 30);
    const vertex2 = graph.insertVertex(parent, null, 'World', 200, 150, 80, 30);

    // 插入边
    graph.insertEdge(parent, null, '', vertex1, vertex2);
} finally {
    // 结束事务
    graph.getModel().endUpdate();
}
6.3.2 拖放与连接

mxGraph默认支持拖放和连接功能。你可以通过如下代码来启用或禁用这些功能：

// 启用拖放
graph.setPanning(true);

// 启用连接
const rubberband = new mxRubberband(graph);
const keyHandler = new mxKeyHandler(graph);
6.3.3 样式定制

mxGraph提供了丰富的样式选项，你可以通过如下代码来定制图形的外观：

const style = graph.getStylesheet().getDefaultVertexStyle();
style[mxConstants.STYLE_SHAPE] = mxConstants.SHAPE_RECTANGLE;
style[mxConstants.STYLE_ROUNDED] = true;
style[mxConstants.STYLE_FILLCOLOR] = '#C3D9FF';
style[mxConstants.STYLE_STROKECOLOR] = '#6482B9';
style[mxConstants.STYLE_FONTCOLOR] = '#774400';

6.4 高级使用

6.4.1 自定义节点

你可以通过继承 mxCellRenderer 来实现自定义节点：

function CustomShape() {
    mxActor.call(this);
}
mxUtils.extend(CustomShape, mxActor);

CustomShape.prototype.paintVertexShape = function (c, x, y, w, h) {
    c.begin();
    c.moveTo(0, 0);
    c.lineTo(w, 0);
    c.lineTo(w, h);
    c.lineTo(0, h);
    c.close();
    c.fillAndStroke();
};

mxCellRenderer.prototype.defaultShapes['customShape'] = CustomShape;

const vertex = graph.insertVertex(parent, null, 'Custom', 120, 120, 80, 30, 'shape=customShape;fillColor=#FF0000');
6.4.2 动态更新

你可以动态更新节点和边的数据：

graph.getModel().beginUpdate();
try {
    const cell = graph.getModel().getCell('vertexId');
    graph.getModel().setValue(cell, 'New Label');
} finally {
    graph.getModel().endUpdate();
}
6.4.3 性能优化

在处理大量数据时，可以通过批量更新和减少重绘次数提高性能：

graph.getModel().beginUpdate();
try {
    for (let i = 0; i < 1000; i++) {
        graph.insertVertex(parent, null, 'Node ' + i, Math.random() * 400, Math.random() * 400, 80, 30);
    }
} finally {
    graph.getModel().endUpdate();
}

更多详细信息请参考mxGraph官方文档.

总结

本文对六个JavaScript图形和数据可视化库进行了深入探讨。通过系统地描述每个库的主要特点、安装步骤、配置方法、基本功能和高级使用，读者能够全面了解每个库的特性和优势。jsPlumb适用于需要实现拖放连接的项目，GoJS则是创建交互式图表的不二之选。draw2d专注于精细的图形绘制，而Cytoscape.js则在数据库图的可视化方面表现出色。JointJS以其强大的图形处理能力受到青睐，mxGraph作为一个轻量级的图形库也有着广泛的应用前景。综合来看，这些库各有千秋，开发者可以根据具体需求选择合适的工具，提高开发效率和项目质量。

标签：draw2d,graph,JavaScript,JS,jsPlumb,go,图形库,new,节点
From： https://blog.csdn.net/qq_42531954/article/details/140085063

相关文章

  • 【JavaScript脚本宇宙】加速您的网站：图像优化工具和库的终极指南
    别让大图拖垮你的应用：如何正确优化图像前言在数字时代，图像是我们日常生活中不可或缺的一部分。然而，随着图像数量的增加和分辨率的提高，它们也占据了越来越多的存储空间和带宽。为了解决这个问题，开发人员可以使用各种图像优化工具和技术来减小图像文件的大小，同时保持其质量......
  • 【JavaScript脚本宇宙】精通前端开发：六大热门CSS框架详解
    前端开发的利器：深入了解六大CSS框架前言在现代Web开发中，选择适合的前端框架和工具包是构建高效、响应式和美观的网站或应用程序的关键。本文将详细介绍六个广受欢迎的CSS框架：Bootstrap、Bulma、TailwindCSS、Foundation、Materialize和SemanticUI。每个框架都有其独特的......
  • 对前端js高级面向对象的理解？ 如何理解前端js中的内置对象、 对象原型、原型链？
    对象前言对象是一个包含相关数据和方法的集合（通常由一些变量和函数组成，我们称之为对象里面的属性和方法）对象是javascript中的一个重要的概念，甚至有“JavaScript中万物皆是对象”的说法。首先看面向对象 面向对象编程将一个系统抽象为许多对象的集合，每一个对象代表了这个系......
  • Vite 打包如何允许存在commonjs
    首先安装依赖：npminstall@rollup/plugin-commonjs如图所示，添加plugin插件 示例代码：import{resolve}from'path';import{defineConfig}from'vite';importvuefrom'@vitejs/plugin-vue';importvueJsxfrom'@vitejs/plugin-vue-jsx&......
  • 033基于SSM+Jsp的多用户博客个人网站
    开发语言：Java框架：ssm技术：JSPJDK版本：JDK1.8服务器：tomcat7数据库：mysql5.7（一定要5.7版本）数据库工具：Navicat11开发软件：eclipse/myeclipse/ideaMaven包：Maven3.3.9系统展示管理员登录管理员功能界面博文类型管理界面管理员管理我的收藏留言板管理客服聊天管理学生功......
  • 032基于SSM+Jsp的多人命题系统
    开发语言：Java框架：ssm技术：JSPJDK版本：JDK1.8服务器：tomcat7数据库：mysql5.7（一定要5.7版本）数据库工具：Navicat11开发软件：eclipse/myeclipse/ideaMaven包：Maven3.3.9系统展示管理员登录学生管理教师信息命题信息系统管理教师注册教师前台个人中心公告信息试题信息......
  • 基于JSP和MySQL的小说阅读网站系统
    开头语：你好，我是计算机专业的猫哥，如果你对小说阅读网站感兴趣，欢迎联系我。开发语言：JSP数据库：MySQL技术：JSP+Java工具：MySql数据库，Java开发工具系统展示首页管理员功能模块读者后台功能模块作者后台功能模块摘要随着网络的发展，小说阅读行业迅速壮大，小说阅读网......
  • 基于JSP的体育竞赛成绩管理系统
    开头语：你好呀，我是计算机学长猫哥！如果有相关需求，文末可以找到我的联系方式。开发语言：JSP数据库：MySQL技术：JSP+Java工具：MyEclipse,Tomcat,MySQL系统展示首页管理员功能模块运动员功能模块裁判员功能模块摘要体育竞赛成绩管理系统的开发旨在适应网络市场的发......
  • 【前端网页游戏开发】Vue3＋PixiJS开发2D闯关打怪游戏，开发时长为6天，成功推出v1.0正式版
    更新内容增加了地图切换功能，扩展了游戏的游玩长度，进入每一关时，击杀10只怪物就会提示通关成功，进入下一关，点击按钮后会恢复玩家的血量，然后重新生成怪物，如果玩家死亡，就会回到提示回到主界面点击后游戏最后增加了BOSS，在玩家进入第四关时会出现BOSS角色，血量为20，玩家伤害为攻击......
  • JavaScript发送带附件的电子邮件
    consttransporter=nodemailer.createTransport({host:"smtp.qq.com",//SMTP服务器地址port:465,//SMTP端口，对于SSL使用465secure:true,//对端口465使用“true”，对所有其他端口使用“false”auth:{user:"发件人邮箱",//发件人邮箱pass:"......

赞助商

阅读排行

网站主页关于我们联系我们网站地图

本网站内容转载自其他媒体，侵权联系[admin##ips99.com]。

Copyright © 2020-2023 IPS99 版权所有 IPS99