Использование Antv-x6 и краткое изложение | Техническая команда логистики Jingdong

1. Введение

AntV — это инструмент визуализации данных ( https://antv.vision/zh/ ), который может легко создавать диаграммы или другие графики, чтобы наша разработка страниц облегчала визуализацию данных. После входа на сайт мы видим семь модулей:

G2: Управляемая данными, очень простая в использовании, масштабируемая визуальная графическая грамматика
S2: Готовая таблица многомерного визуального анализа G6:
Удобный механизм визуализации реляционных данных и инструмент анализа графиков X6: Чрезвычайно настраиваемый, готовый к работе механизм редактирования графиков на основе данных L7: Высокопроизводительная платформа визуализации геопространственных данных с
высоким качеством рендеринга многосторонние среды AVA: AVA — это технология, созданная для упрощения визуального анализа кадра.

2 установка

Установите x6 через npm или команду yarn

# npm
$npm install @anv/x6 --save
# yarn
$yarn add @antv/x6

После завершения установки используйте import или require для ссылки.

import { Graph } from 'antv/x6'

3 Основные понятия

3.1 График холста

В x6 Graph является носителем графа, который содержит все элементы (узлы, ребра и т.д.) на графе, а также монтирует связанные операции графа (такие как интерактивный мониторинг, операции с элементами и т.д.).

const graph = new Graph({
  panning:true //支持平移
  selecting: {
    enabled: true, //支持选中
    multiple: true,
    movable: true, //支持拖动
  }
}
graph.zoom(0.2) //在原来缩放级别上增加0.2
graph.zoom(-0.2) //在原来缩放级别上减少0.2

3.2 ячейка базового класса

Базовый класс Cell определяет общие атрибуты и методы узлов и ребер, такие как стиль атрибута, видимость и бизнес-данные.

ячейка имеет несколько основных опций:

3.3 УзелУзел

node является базовым классом всех узлов, наследуется от Cell и определяет общие свойства и методы узлов.

размер: определяет размер узла, который является объектом, содержащим свойства ширины и высоты, а размер узла можно получить и установить с помощью метода size().
position: Позиция узла, который является объектом, содержащим свойства x и y.
угол: угол поворота узла, а центр вращения — это центр узла.

3.4 Край

источник: исходный объект.
цель: целевой объект. И источником, и целью может быть любой элемент, разница в том, что источник — это начальная точка, а цель — конечная точка. Например, стрелка в соединителе всегда указывает от источника к цели.
разъем: соединительная линия.
вершины: точки пути, представляющие собой массив. Ребра начинаются с начальной точки, последовательно проходят через путевые точки и, наконец, достигают конечной точки.

4 использовать

4.1 Создание узла

1. Используйте конструкторы. Пространство имен Shape X6 имеет встроенные базовые узлы, такие как Rect, Circle, Ellipse и т. д., и вы можете использовать конструкторы этих узлов для создания узлов.

import { Shape } from '@antv/x6'

// 创建节点
const rect = new Shape.Rect({
  x: 100,
  y: 200,
  width: 80,
  height: 40,
  angle: 15,
  attrs: {
    body: {
      fill: '#2ECC71', // 背景颜色
      stroke: '#000', // 边框颜色
    },
    label: {
      text: 'coldchain', // 文本
      fill: '#333', // 文字颜色
      fontSize: 13, // 文字大小
    },
  },
})

// 添加到画布
graph.addNode(rect)

2. Используйте узел VUE

Graph.registerNode("my-count", {  //将vue组件注册到系统中
  inherit: "vue-shape",  //指定节点类型为vue-shape
  x: 200,
  y: 150,
  width: 150,
  height: 100,
  component: {
    template: `<Count />`,
    components: {
      Count,
    },
  },
});

graph.addNode({
  id: "1",
  shape: "my-count", //将节点的 shape 属性指定为注册的节点名称
  x: 400,
  y: 150,
  width: 150,
  height: 100,
  data: {
    num: 0,
  },
});

Таким образом, мы можем настроить узел, что значительно увеличивает масштабируемость узла.

4.2 Узловое соединение

  const rect1 = graph.addNode({
      x: 30,
      y: 30,
      width: 100,
      height: 60,
      label: 'hello',
      id:'coldChain01',
      ports: [  //设置连接桩
        { id: 'port1' }, 
        { id: 'port2' },
      ],
    })

    const rect2 = graph.addNode({
      x: 400,
      y: 240,
      width: 100,
      height: 60,
      label: 'world',
      id:'coldChain02',
      ports: [
        { id: 'port3' }, 
        { id: 'port4' },
      ],
    })

    graph.addEdge({
      source: {cell:'coldChain01',port:'port1'}, //起点id和连接桩id 
      target: {cell:'coldChain02',port:'port3'}, //终点id和连接桩id 
      vertices: [
        { x: 100, y: 200 },
        { x: 300, y: 120 },
      ],
    })
  }

4.3 Система событий

Antv-x6 поддерживает расширенные события мыши, как показано ниже:

graph.on('cell:click', ({ e, x, y, cell, view }) => { })

События можно отслеживать с помощью функции graph.on.Например, в блок-схеме используются такие события, как щелчок, двойной щелчок, перемещение мыши внутрь и перемещение. Кроме того, Antv-x6 также поддерживает пользовательские события.

node.attr({
  // 表示一个删除按钮，点击时删除该节点
  image: {
    event: 'node:delete',
    xlinkHref: 'trash.png',
    width: 20,
    height: 20,
  },
})
graph.on('node:delete', ({ view, e }) => {
  e.stopPropagation()
  view.cell.remove()
})

5 резюме

Antv-x6 — это мощный и масштабируемый инструмент визуализации, который предоставляет ряд готовых интерактивных программ и простых в использовании возможностей настройки узлов, помогающих пользователям легко создавать блок-схемы, диаграммы ER и другие интерактивные приложения. Этот обмен знакомит с основными функциями x6, а более продвинутые функции ждут, пока мы их изучим и изучим дальше.

Автор: JD Logistics Ян Житинг

Источник: сообщество разработчиков JD Cloud Ziqishuo Tech.