Vue中使用dagre-d3绘制流程图实用指南

1、插件版本

    "d3": "^7.8.0",

    "dagre-d3": "^0.6.4",

2、绘制简单的流程图

效果图：

3、拖拽缩放

        // 拖拽缩放 "d3": "^7.8.0"
        const svg = d3.select('svg.dagre');
        let zoom = d3.zoom().on('zoom', function (current) {
          container.attr('transform', current.transform);
        });
        svg.call(zoom);

限制缩放范围

        let zoom = d3.zoom().scaleExtent([0.5, 2]).on('zoom', function (current) {
          container.attr('transform', current.transform);
        });

d3版本v5时的写法

        // 拖拽缩放 ("d3": "^5.15.0",)
        const svg = d3.select('svg.dagre');
        let zoom = d3.zoom().scaleExtent([0.5, 2]).on('zoom', function () {
          container.attr('transform', d3.event.transform);
        });
        svg.call(zoom);

效果：

4、鼠标悬停显示隐藏tooltip

        // 鼠标悬停显示隐藏tooltip
        const that = this;
        const tooltipBox = that.$refs.tooltip;
        container.on('mouseover', e => {
          that.currentNode = that.nodes.filter(item => item.id === Number(e.target.__data__))[0];
          tooltipBox.style.display = 'block';
          tooltipBox.style.top = e.clientY + 20 + 'px';
          tooltipBox.style.left = e.clientX + 'px';
        }).on('mouseout', function () {
          tooltipBox.style.display = 'none';
        })

效果：

 5、完整代码

6、参考资料

【1】 dagre-d3绘制流程图实用指南