血缘关系图

2023-08-18 00:47| 来源: 网络整理| 查看: 265

有个页面我估时 3 天（开发 + 联调 + 交互），想着怎么着一天也搞定了。产品给的设计稿长这样：

Screen Shot 2022-03-03 at 3.31.19 PM.png

半天搞定，等我部署完了以后，效果还不错。

但是，配置很多数据节点的时候，实际效果：

Screen Shot 2022-03-03 at 3.29.03 PM.png

然后改了好几天，我快要被搞疯了，下面说说我的心酸历程。

第一次尝试 echarts graph

官方示例：echarts.apache.org/examples/zh…

后端只返回了 points 和 relations，没有每个点的 x，y 坐标（可能后端开发也不会算），我在前端页面尝试计算每个点的 x，y，尝试让他们均匀分布，试了 N 种算法，最终放弃（花了大半天时间）。

网上不少人也在问，怎么计算 echarts graph 每个点的 x y 坐标

echarts 官方文档有引力布局（layout=force），但是所有点全部揉在一起，效果太差了（下图是官方示例，layout 改成 force）。

download (1).png

series-graph.layout 三个可选属性：

'none' 不采用任何布局，使用节点中提供的 x， y 作为节点的位置。 'circular' 采用环形布局，见示例 Les Miserables，布局相关的配置项见 graph.circular 'force' 采用力引导布局，见示例 Force，布局相关的配置项见 graph.force 第二次尝试 echarts tree

为啥还用 echarts 呢？我有点自负，自认为 echarts API 已经很熟很熟了（～～～）

确实，这次用树状图，完美的解决了每个点的分布，还有线的问题

但是，给客户演示的时候，说连线要加上箭头！！！！我尝试了各种 echarts 配置，还是加不了箭头，郁闷死了，github issue 也搜了一把，有人提同样的问题，官方理都不理。

网上也有人问，怎么给 echarts tree 加上箭头

还有另一个更严重的问题，我们这个不是树状图！！！一个人可能有两个儿子，三个父亲，而不是单向的血缘关系。那就只能是普通的关系图了。

第三次尝试 d3

终于要拿出秘密武器了：D3，宇宙中强大的图形工具。

周末两天没出去玩，没打球，我重新复习了 svg 的基本语法，复习了 d3 的用法，以及研究了几个 d3 扩展。还找到了一个库：dagre-d3，他基于 dagre，虽然停止维护了：

github.com/dagrejs/dag… github.com/dagrejs/dag…

最终效果是这样的：

Screen Shot 2022-03-03 at 3.54.49 PM.png

Screen Shot 2022-03-03 at 4.39.54 PM.png

加上了图例，缩放、拖动、tooltip 等功能，还算完美。

感谢 D3，感谢开源世界！

d3、d3-tip、dagre-d3 基本用法

下面是伪代码，d3-tip 和 dagre-d3 官方文档确实很差，怎么引入包都没写清楚。

import d3 from 'd3'; import * as dagreD3 from 'dagre-d3'; import d3Tip from 'd3-tip'; // 创建图形容器 const g = new dagreD3.graphlib.Graph().setGraph({}).setDefaultEdgeLabel(function() { return {}; }); // 绘制所有点 points.forEach((item, index) => g.setNode(item.id, item)); // 绘制所有连线/关系 relations.forEach(item => g.setEdge(item.source, item.target, {})); const svg = d3.select('svg'); const inner = svg.select('g'); // 设置缩放 const zoom = d3.zoom().on('zoom', inner.attr('transform', d3.event.transform); svg.call(zoom); // 设置 tooltip const tooltip = d3Tip().attr('class', 'd3-tip').offset([10, 0]).html((d) => getTooltip(that.g.node(d))); // 这里省略拼接字符串，业务代码 svg.call(tooltip); // dagreD3 绘制到 svg 上 const render = new dagreD3.render(); render(inner, g); // 点击事件 inner.selectAll('g.node').on('click', (id) => { console.log(id); }); echarts 和 D3

echarts 是开箱即用的，没有自定义渲染节点等功能，不够灵活。 d3 要学习各种 svg 等语法，上手成本高，对 web 技术、可视化理论、数学逻辑都一定要求。

【本文地址】

公司简介

联系我们