Руководство по использованию блок-схемы рисования dagre-d3

d3.js
Руководство по использованию блок-схемы рисования dagre-d3

написать впереди

Прежде чем маленький партнер спросил меня, как использовать D3 спереди, чтобы нарисовать блок-схему, сегодня я хочу поделиться с вами расположением.

Ясно, пока ваши данные обладают достаточной вычислительной мощностью, использование родных блок-схем D3 абсолютно возможно, однако, чтобы упростить использование для всех, чтобы избежать дублирования - создайте колесо, мы рекомендуем специальный plug-flow диаграммы D3 dagre-d3 .

Первая встреча с Дагре. dagre — это библиотека javascript, ориентированная на макет ориентированного графа.Поскольку dagre фокусируется только на макете графа, необходимо использовать другие схемы для реального рендеринга графов в соответствии с информацией о макете dagre, а dagre-d3 — это схема рендеринга dagre на основе D3.

адрес проекта дагре

адрес проекта dagre-d3

Далее используются D3 и dagre-d3, чтобы нарисовать блок-схему обнаружения мобильного персонала во время новой коронной эпидемии, а старые правила сначала показывают визуализацию.

流程图

Нарисуйте базовую блок-схему

данные

В качестве диаграммы DEAL DEAL DEAL DEAL, сетевые диаграммы, данные из узлов и ребер между двумя компонентами.

let dataset ={
  nodes: [
    {id: 0,label: "流动人员",shape: "rect"},
    {id: 1,label: "安全筛查",shape: "rect"},
    {id: 2,label: "热像仪人体测温筛查",shape: "diamond"},
    {id: 3,label: "人工复测",shape: "diamond"},
    {id: 4,label: "快速通过",shape: "rect"},
    {id: 5,label: "紧急处理",shape: "rect"}
   ],
   edges: [
     {source: 0,target: 1,label: ""},
     {source: 1,target: 2,label: ""},
     {source: 2,target: 4,label: "正常"},
     {source: 2,target: 3,label: "不正常"},
     {source: 3,target: 5,label: "不正常"},
     {source: 3,target: 4,label: "正常"}
   ]
}

рисунок

Использование dagre-d3 для рисования блок-схемы разделено на следующие этапы.

  1. Добавьте два файла: d3.js и dagre-d3.js.
  2. Создайте объект Graph с помощью dagre-d3 и добавьте узлы и ребра.
  3. Создавайте рендереры и рисуйте блок-схемы в svg.
//引入 d3,dagre-d3
<script src="./d3.v5.min.js"></script>
<script src="./dagre-d3.min.js"></script>
<script>
// 创建 graph 对象
let g = new dagreD3.graphlib.Graph();
//设置图
g.setGraph({
 rankdir:'TB'
});
dataset.nodes.forEach(item => {
    g.setNode(item.id, {
      //节点标签
      label: item.label,
      //节点形状
      shape: item.shape,
      //节点样式
       style: "fill:#fff;stroke:#000"
      })
 })
dataset.edges.forEach(item => {
     g.setEdge(item.source,item.target, {
        //边标签
        label: item.label,
        //边样式
        style: "fill:#fff;stroke:#333;stroke-width:1.5px"
      })
  })
// 创建渲染器
let render = new dagreD3.render();
// 选择 svg 并添加一个g元素作为绘图容器.
let svgGroup = d3.select('svg').append('g');
// 在绘图容器上运行渲染器生成流程图.
render(svgGroup, g);
</script>

Таким образом, нарисована предыдущая схема потока, так просто, давайте попробуем это!

Если вам нужно гораздо больше, мы хотим нарисовать более сложную блок-схему, поэтому вам также необходимо знать дагре в основных понятиях и связанных элементах конфигурации, глубоко понимать дагре и д3-дагре.

основная концепция

dagre реализует макет графа на основе теории «Техника рисования ориентированных графов» [1]. Теория этой статьи содержит следующие 5 важных концепций:

  • graph, граф в целом, используется для настройки глобальных параметров графа.
  • Узел, а именно вершина, дагре не заботится о фактической форме и стиле узла при расчете, а требует только информацию о размерах.
  • edge, то есть край, край должен объявить узлы на обоих концах и в своем направлении. Например, A -> B означает ребро из A в B.
  • ранг, то есть уровень, ранг является основной логической единицей в макете блок-схемы, узлы на обоих концах ребра должны принадлежать к разным рангам, а узлы + в одном ранге будут иметь одинаковые координаты глубины (например, , в вертикальной компоновке графика координата y такая же). Неважно, если вы этого не понимаете. Во-первых, у меня есть впечатление. Позже я буду использовать примеры, чтобы объяснить роль ранга.
  • метка, то есть метка, метка не является необходимым элементом, но дагре добавляет расчет макета метки края, чтобы применить к большему количеству сценариев.

понять ранг

В следующем примере мы представим узел и ребро на простом для понимания языке описания: A -> B представляет два узла A и B и ребро от A до B.

Пример 1

A->B; B->C;

+---+       +---+        +---+  
| A |------>| B |------->| C |  
+---+       +---+        +---+

В этом примере узел A, B, C принадлежит 3 ранга соответственно.

Пример 2

A->B; A->C;

            +---+
        --> | B |
+---+--/    +---+
| A |
+---+--\    +---+
        --> | C |
            +---+

A находится в ранге 1, а B и C на один уровень ниже, чем A, и принадлежат рангу 2, поэтому B и C имеют одинаковую координату x (изображение в примере вытянуто по горизонтали, поэтому направлением глубины является направление x).

Пример 3

A->B; B->C; A->C;

            +---+
         -->| B |---\
+---+---/   +---+    --->+---+  
| A |                    | C |  
+---+------------------->+---+

В этом примере мы обнаружили, что узлы на обоих концах ребра могут отличаться более чем на один ранг. Поскольку узлы на обоих концах ребра не могут принадлежать к одному и тому же рангу, мы не можем допустить, чтобы B и C принадлежали к одному и тому же рангу, и оптимальный результат рисования состоит в том, что A и C разделены 1 рангом. То есть A находится в ранге 1, B — в ранге 2 и C — в ранге 3.

элемент конфигурации

После понимания основных концепций перетаскивания давайте посмотрим, какие элементы конфигурации предоставляет перетаскивание.

Элементы конфигурации перетаскивания можно в основном разделить на три части: глобальная конфигурация графа, узел и ребро.

График Конфигурация

  • rankdir

Установите направление расширения узла node, оно имеет 4 значения: TB, BT, LR или RL, необязательно, по умолчанию — «TB» (сверху вниз). Здесь T = верх, B = низ, L = лево и R = право.

  • align

Устанавливает выравнивание узлов узла в одном ранге.Также имеет 4 необязательных значения: UL (верхний левый), UR (верхний правый), DL (нижний левый) или DR (нижний правый), значение по умолчанию не определено. Здесь U = вверх, D = вниз, L = влево и R = вправо.

  • nodesep — расстояние между узлами в ранге одного уровня. По умолчанию 50
  • edgep — расстояние между ребрами. По умолчанию 10
  • rankep — расстояние между соседними рядами, например расстояние между A и B и расстояние между B и C в примере 1. По умолчанию 50
  • marginx — это левый и правый интервал между общим изображением и холстом. По умолчанию 0
  • marginy 即 图整体与画布的上下间距。 По умолчанию 0 这些间距是不是有点晕，没关系，相信这张图能帮助你理解。

Чтобы облегчить понимание этих свойств, продолжим с приведенной выше картинкой, ведь картинка стоит тысячи слов.

g.setGraph({
   rankdir:'LR', //默认'TB'
   align:'DL',
   nodesep: 100,
   edgesep:100,
   ranksep: 50,
   marginx:50,
   marginy:100
});
  • Значение rankdir, установленное на «LR», означает, что макет графика простирается слева направо.

  • выравнивание, установленное на «DR», означает выравнивание по нижнему правому краю на том же уровне.
  • nodesep ratingsep edgeep Стиль после настройки.

конфигурация узла

  • Формат метки узла labelType, вы можете установить текстовый и HTML-формат, по умолчанию используется текстовый формат.
  • Пометьте метку узла, то есть текст для отображения на узле, устанавливая формат HTML, ярлык тегов HTML.
  • форма узла формы, вы можете установить четыре формы прямоугольника, круга, эллипса, ромба, а также вы можете использовать render.shapes() для настройки формы.
  • style Стиль узла, вы можете установить цвет заливки и границы узла, например стиль: "fill:#fff;stroke:#faf"
  • labelStyle Стиль метки узла, вы можете установить стиль текста (цвет, толщина, размер) метки узла, например стиль: "fill:#afa;начертание шрифта:жирный"
  • ширина - это ширина узла.
  • height — это высота узла. Настройте узлы и посмотрите, как будет выглядеть наша блок-схема?
g.setNode(item.id, {
    //节点标签
    label: item.label,
//节点形状
    shape: item.shape,
    //节点样式
    style: "fill:#faf;stroke:#faf",
    //节点标签样式
    labelStyle:"fill:#afa"
})

Пограничная конфигурация

  • Формат метки узла labelType, вы можете установить текстовый и HTML-формат, по умолчанию используется текстовый формат.
  • label Метка узла, то есть текст, который будет отображаться на узле.При установке формата html метка является меткой html.
  • стиль Стиль края, вы можете установить цвет заливки и границы края, например стиль: "fill:#fff;stroke:#faf"
  • labelStyle стиль боковой метки, вы можете установить стиль текста (цвет, толщина, размер) боковой метки, например labelStyle: "fill:#afa;font-weight:bold"
  • Форма стрелки со стрелкой, вы можете установить три стиля: нормальный, V-образный, ненаправленный, по умолчанию нормальный.
  • стиль стрелки arrowheadStyle, вы можете установить цвет стрелки, например, arrowheadStyle:"fill:#f66". Настройте ребра и посмотрите, как будет выглядеть наша блок-схема?
g.setEdge(item.source,item.target, {
   //边标签
   label: item.label,
   //边样式
   style: "fill:#fff;stroke:#afa;stroke-width:2px",
   labelStyle: "fill:#1890ff",
   arrowhead:"vee",
   arrowheadStyle:"fill:#f66"
})

После изучения конфигурации Dagre вы можете нарисовать таблицу потока, которую вы хотите. Но что, если вы хотите, чтобы все виды взаимодействий, такие как зависение над мышью, масштабируясь на блок-схеме и т. Д.? Это требует использования API D3.

взаимодействовать

Если вы хотите добавить интерактивные функции, вам нужно использовать функции D3. Ниже приведен пример перетаскивания и масштабирования и наведения мыши для отображения всплывающей подсказки.

Перетащите, чтобы увеличить

let svg = d3.select('svg')
// 建立拖拽缩放
let zoom = d3.zoom()
    .on("zoom", function () {
        svgGroup.attr("transform", d3.event.transform);
     });
svg.call(zoom);

всплывающая подсказка при наведении курсора

  • js-код
//创建提示框
function createTooltip() {
   return d3.select('body')
          .append('div')
          .classed('tooltip', true)
          .style('opacity', 0)
          .style('display', 'none');
    };
let tooltip = createTooltip();
//tooltip显示
function tipVisible(textContent) {
    tooltip.transition()
           .duration(400)
           .style('opacity', 0.9)
           .style('display', 'block');
     tooltip.html(textContent)
            .style('left', (d3.event.pageX + 15) + 'px')
            .style('top', (d3.event.pageY + 15) + 'px');
        }
//tooltip隐藏
function tipHidden() {
     tooltip.transition()
            .duration(400)
            .style('opacity', 0)
            .style('display', 'none');
 }

 //鼠标悬停显示隐藏tooltip
svgGroup.selectAll("g.node")
    .on("mouseover", function (v) {
       tipVisible(g.node(v).label);
     })
    .on("mouseout", function (v) {
        tipHidden();
     })
  • css-стиль
.tooltip {
     position: absolute;
     font-size: 12px;
     text-align: center;
     background-color: white;
     border-radius: 3px;
     box-shadow: rgb(174, 174, 174) 0px 0px 10px;
     cursor: pointer;
     display: inline-block;
     padding:10px;
 }

.tooltip>div {
     padding: 10px;
 }

Эта статья посвящена разделу Dagre, который относится к визуализации данных Graph: автоматическая компоновка JS имеет диаграмму без колец [2].

Наконец, вставьте исходный адрес этой статьи:

D3 рисует блок-схемы

References

[1] «Техника рисования ориентированных графов»:woohoo.graph viz.org/document ATI…

[2] Визуализация графических данных: автоматический макет JS, направленный ациклический граф: Визуализация графических данных: автоматический макет JS, направленный ациклический граф

Следите за номером подписки на технологию визуализации данных WeChat

订阅号

Категории