d3 canvas 绘制力导向图

d3 canvas 绘制力导向图

下面是分别使用 svg 和 canvas 绘制的效果图
svg绘制的效果图

svg绘制的效果图

canvas绘制的效果图

canvas绘制的效果图

重新使用 canvas 绘制的原因

数据量小的时候，使用 svg 绘制是没什么问题的，但是点和线的数据量一大，就容易造成页面卡顿的情况，因此只能使用 canvas 又重新绘制了一遍，下面是对人家的代码进行改进，参考链接放在最下面了。

html

1
2
3
4
<div class="micro-topo-chart">
    <canvas id="topo-canvas" class="topo-canvas" width="1200" height="800"></canvas> //绘制 canvas
    <div id="topo-tooltip"></div> // 绘制tooltip
</div>

js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
function force_zoom_canvas() {
  // TODO 内部变量
  const self = this
  let graph = {},
      canvas = document.getElementById('topo-canvas'),
      context = canvas.getContext("2d"),
      width = document.body.clientWidth || 1200,
      height = document.body.clientHeight || 800,
      transform = d3.zoomIdentity,
      distance = 47,
      simulation = d3.forceSimulation(),
      layerColor = [[183,171,154], [119,68,67], [123,149,195], [226,187,91], [208,129,76], [179,108,104], [179,179,112]] // 加了level字段，不同等级用不同的颜色表示,用rgb表示是为了后面的高亮显示
      tooltip = document.getElementById('topo-tooltip')
  // TODO 配置D3
  function initialize(nodes, calls) {
    graph.nodes = nodes;
    graph.links = calls;
    const levelMap = {};
    const resLevel = [];
    // 根据level 去控制node的x、y
    graph.nodes.forEach(item => {
      if (resLevel[item.level]) {
        resLevel[item.level]++;
      } else {
        resLevel[item.level] = 1;
      }
    })
    graph.nodes.forEach((item) => {
      const index = levelMap[item.level] || 0;
      // 考虑单双数 对排序的影响
      if (resLevel[item.level] % 2 !== 0) {
          item.fx = Math.ceil(index / 2) * (index % 2 ? -1 : 1) * 200 + 700;
      } else {
          item.fx = Math.ceil(index / 2) * (index % 2 ? -1 : 1) * 200 + 800;
      }
      item.fy = item.level * 200 + 150;
      levelMap[item.level] = index + 1;
    });
    simulation
      .force("link", d3.forceLink().distance(distance).strength(1).id(function (n) { return n.id; }))
      .force("charge", d3.forceManyBody())
      .force("center", d3.forceCenter(width / 2, height / 2))
      .nodes(graph.nodes)
      .on("tick", render);
    simulation.force("link")
      .links(graph.links);
    d3.select(canvas)
      .call(d3.drag().container(canvas).subject(subject_from_event).on("start", drag_started).on("drag", dragged).on("end", drag_ended))
      .call(d3.zoom().scaleExtent([3 / 10, 10]).on("zoom", function () { transform = d3.event.transform; render(); }))
      .call(render);
    d3.select(canvas)
      .on('mousemove', d3mousemove) // 鼠标移动事件
      .on('click', d3click) // 监听点击事件
    function d3mousemove() {
      const ex = transform.invertX(d3.event.layerX); // 重点 d3.event.layerX，之前tooltip的位置会有偏移，canvas缩小放大后
      const ey = transform.invertY(d3.event.layerY);
      const node = simulation.find(ex, ey);
      if(node && ex > node.x - 90 && ex < node.x + 90 && ey > node.y && ey < node.y + 60){
        let text = node.appId + "\n" + node.method
        tooltip.innerText = text
        tooltip.style.left = `${transform.applyX(node.x) - (transform.k < 0.5 ? 45 : 90)}px`;
        tooltip.style.top = `${transform.applyY(node.y) + (node.method ? -60 : -30)}px`;
        tooltip.style.opacity = 1 // 鼠标放在node上，才显示tooltip
      } else {
        tooltip.innerText = ''
        tooltip.style.opacity = 0 // 鼠标不放在node上，不显示tooltip
      }
    }
    function d3click() {
      const ex = transform.invertX(d3.event.layerX);
      const ey = transform.invertY(d3.event.layerY);
      const node = simulation.find(ex, ey);
      if(node && ex > node.x - 90 && ex < node.x + 90 && ey > node.y && ey < node.y + 60){
        self.$eventBus.$emit('changeEndpointTopoSel', node); // 是为了获取当前node所在链路
      }
    }
    //TODO 图元发现
    function subject_from_event() {
      var ex = transform.invertX(d3.event.x),
          ey = transform.invertY(d3.event.y);
      var node = simulation.find(ex, ey);
      if(node && ex > node.x - 90 && ex < node.x + 90 && ey > node.y && ey < node.y + 60){
        node.x = transform.applyX(node.x);
        node.y = transform.applyY(node.y);
        return node;
      }
      return null;
    }
    //TODO 图元拖拽
    function drag_started() {
      d3.event.subject.fx = transform.invertX(d3.event.x);
      d3.event.subject.fy = transform.invertY(d3.event.y);
      if (!d3.event.active) simulation.alphaTarget(0.3).restart();
      d3.event.sourceEvent.stopPropagation();
    }
    function dragged() {
      d3.event.subject.fx = transform.invertX(d3.event.x);
      d3.event.subject.fy = transform.invertY(d3.event.y);
    }
    function drag_ended() {
      if (!d3.event.active) simulation.alphaTarget(0);
    }
  }
  // 是否高亮显示link
  function isChooseLine(link) {
    return self.datas && self.datas.chooseNodesAndCalls && self.datas.chooseNodesAndCalls.calls.findIndex(item => item.id === link.id) > -1;
  }
  // 是否高亮显示node
  function isChooseNodes(node) {
    return self.datas && self.datas.chooseNodesAndCalls && self.datas.chooseNodesAndCalls.nodes.findIndex(item => item.id === node.id) > -1;
  }
  // TODO 图元渲染
  function render() {
    context.save();
    context.clearRect(0, 0, width, height);
    context.translate(transform.x, transform.y);
    context.scale(transform.k, transform.k);
    graph.links.forEach(function (l) {
      context.beginPath();
      // context.setLineDash([8, 8]);
      context.moveTo(l.source.x, l.source.y);
      context.quadraticCurveTo((l.source.x + l.target.x) / 2, (l.target.y + l.source.y) / 2 - 80, l.target.x, l.target.y);
      context.lineTo(l.target.x, l.target.y);
      const idx = l.source.level % 7;
      context.strokeStyle = `rgba(${layerColor[idx][0]},${layerColor[idx][1]},${layerColor[idx][2]}, ${isChooseLine(l) ? 1 : 1})`; // 属于当前点击node的链路，高亮显示
      context.stroke();
    });
    graph.nodes.forEach(function (n) {
      context.fillStyle = "#777";
      context.beginPath();
      context.moveTo(n.x, n.y);
      const idx = n.level % 7;
      context.fillStyle = `rgba(${layerColor[idx][0]},${layerColor[idx][1]},${layerColor[idx][2]}, ${isChooseNodes(n) ? 1 : 1})`;  // 属于当前点击node的链路，高亮显示
      context.fillRect(n.x - 90, n.y, 180, 60);
      context.fill();
      context.fillStyle = "#fff";
      context.stroke();
      context.fillText(n.id && n.id.length > 25 ? `id: ${n.id.substring(0,25)}...`: `id: ${n.id}`, n.x - 80, n.y + 25);
      context.fillText(n.level && n.level.length > 25 ? `level: ${n.level.substring(0,25)}...`: `level: ${n.level}`, n.x - 80, n.y + 40);
    });
    context.restore();
  }
  // TODO 接口
  graph = {
    initialize
  };
  return graph;
}
const a = force_zoom_canvas('topo-canvas');
a.initialize([
  {"id": "1", level: 0}, {"id": "2", level: 1},{"id": "3", level: 1},{"id": "4", level: 1},{"id": "5", level: 2},{"id": "6", level: 2},{"id": "7", level: 2},{"id": "8", level: 2}
],[
  {"source": "1", "target": "2"},{"source": "1", "target": "3"},{"source": "1", "target": "4"},{"source": "2", "target": "5"},{"source": "3", "target": "5"},{"source": "3", "target": "6"},{"source": "3", "target": "8"},{"source": "4", "target": "7"}
]);

完整代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div class="micro-topo-chart">
        <canvas id="topo-canvas" class="topo-canvas" width="1200" height="800"></canvas>
        <div id="topo-tooltip"></div>
    </div>
</body>
<script src="https://cdn.bootcdn.net/ajax/libs/d3/4.9.1/d3.min.js"></script>
<script>
function force_zoom_canvas() {
  // TODO 内部变量
  const self = this
  let graph = {},
      canvas = document.getElementById('topo-canvas'),
      context = canvas.getContext("2d"),
      width = document.body.clientWidth || 1200,
      height = document.body.clientHeight || 800,
      transform = d3.zoomIdentity,
      distance = 47,
      simulation = d3.forceSimulation(),
      layerColor = [[183,171,154], [119,68,67], [123,149,195], [226,187,91], [208,129,76], [179,108,104], [179,179,112]] // 加了level字段，不同等级用不同的颜色表示,用rgb表示是为了后面的高亮显示
      tooltip = document.getElementById('topo-tooltip')
  // TODO 配置D3
  function initialize(nodes, calls) {
    graph.nodes = nodes;
    graph.links = calls;
    const levelMap = {};
    const resLevel = [];
    // 根据level 去控制node的x、y
    graph.nodes.forEach(item => {
      if (resLevel[item.level]) {
        resLevel[item.level]++;
      } else {
        resLevel[item.level] = 1;
      }
    })
    graph.nodes.forEach((item) => {
      const index = levelMap[item.level] || 0;
      // 考虑单双数 对排序的影响
      if (resLevel[item.level] % 2 !== 0) {
        item.fx = Math.ceil(index / 2) * (index % 2 ? -1 : 1) * 200 + 700;
      } else {
        item.fx = Math.ceil(index / 2) * (index % 2 ? -1 : 1) * 200 + 800;
      }
      item.fy = item.level * 200 + 150;
      levelMap[item.level] = index + 1;
    });
    simulation
      .force("link", d3.forceLink().distance(distance).strength(1).id(function (n) { return n.id; }))
      .force("charge", d3.forceManyBody())
      .force("center", d3.forceCenter(width / 2, height / 2))
      .nodes(graph.nodes)
      .on("tick", render);
    simulation.force("link")
      .links(graph.links);
    d3.select(canvas)
      .call(d3.drag().container(canvas).subject(subject_from_event).on("start", drag_started).on("drag", dragged).on("end", drag_ended))
      .call(d3.zoom().scaleExtent([3 / 10, 10]).on("zoom", function () { transform = d3.event.transform; render(); }))
      .call(render);
    d3.select(canvas)
      .on('mousemove', d3mousemove) // 鼠标移动事件
      .on('click', d3click) // 监听点击事件
    function d3mousemove() {
      const ex = transform.invertX(d3.event.layerX); // 重点 d3.event.layerX，之前tooltip的位置会有偏移，canvas缩小放大后
      const ey = transform.invertY(d3.event.layerY);
      const node = simulation.find(ex, ey);
      if(node && ex > node.x - 90 && ex < node.x + 90 && ey > node.y && ey < node.y + 60){
        let text = node.appId + "\n" + node.method
        tooltip.innerText = text
        tooltip.style.left = `${transform.applyX(node.x) - (transform.k < 0.5 ? 45 : 90)}px`;
        tooltip.style.top = `${transform.applyY(node.y) + (node.method ? -60 : -30)}px`;
        tooltip.style.opacity = 1 // 鼠标放在node上，才显示tooltip
      } else {
        tooltip.innerText = ''
        tooltip.style.opacity = 0 // 鼠标不放在node上，不显示tooltip
      }
    }
    function d3click() {
      const ex = transform.invertX(d3.event.layerX);
      const ey = transform.invertY(d3.event.layerY);
      const node = simulation.find(ex, ey);
      if(node && ex > node.x - 90 && ex < node.x + 90 && ey > node.y && ey < node.y + 60){
        self.$eventBus.$emit('changeEndpointTopoSel', node); // 是为了获取当前node所在链路
      }
    }
    //TODO 图元发现
    function subject_from_event() {
      var ex = transform.invertX(d3.event.x),
          ey = transform.invertY(d3.event.y);
      var node = simulation.find(ex, ey);
      if(node && ex > node.x - 90 && ex < node.x + 90 && ey > node.y && ey < node.y + 60){
        node.x = transform.applyX(node.x);
        node.y = transform.applyY(node.y);
        return node;
      }
      return null;
    }
    //TODO 图元拖拽
    function drag_started() {
      d3.event.subject.fx = transform.invertX(d3.event.x);
      d3.event.subject.fy = transform.invertY(d3.event.y);
      if (!d3.event.active) simulation.alphaTarget(0.3).restart();
      d3.event.sourceEvent.stopPropagation();
    }
    function dragged() {
      d3.event.subject.fx = transform.invertX(d3.event.x);
      d3.event.subject.fy = transform.invertY(d3.event.y);
    }
    function drag_ended() {
      if (!d3.event.active) simulation.alphaTarget(0);
    }
  }
  // 是否高亮显示link
  function isChooseLine(link) {
    return self.datas && self.datas.chooseNodesAndCalls && self.datas.chooseNodesAndCalls.calls.findIndex(item => item.id === link.id) > -1;
  }
  // 是否高亮显示node
  function isChooseNodes(node) {
    return self.datas && self.datas.chooseNodesAndCalls && self.datas.chooseNodesAndCalls.nodes.findIndex(item => item.id === node.id) > -1;
  }
  // TODO 图元渲染
  function render() {
    context.save();
    context.clearRect(0, 0, width, height);
    context.translate(transform.x, transform.y);
    context.scale(transform.k, transform.k);
    graph.links.forEach(function (l) {
      context.beginPath();
      // context.setLineDash([8, 8]);
      context.moveTo(l.source.x, l.source.y);
      context.quadraticCurveTo((l.source.x + l.target.x) / 2, (l.target.y + l.source.y) / 2 - 80, l.target.x, l.target.y);
      context.lineTo(l.target.x, l.target.y);
      const idx = l.source.level % 7;
      context.strokeStyle = `rgba(${layerColor[idx][0]},${layerColor[idx][1]},${layerColor[idx][2]}, ${isChooseLine(l) ? 1 : 1})`; // 属于当前点击node的链路，高亮显示
      context.stroke();
    });
    graph.nodes.forEach(function (n) {
      context.fillStyle = "#777";
      context.beginPath();
      context.moveTo(n.x, n.y);
      const idx = n.level % 7;
      context.fillStyle = `rgba(${layerColor[idx][0]},${layerColor[idx][1]},${layerColor[idx][2]}, ${isChooseNodes(n) ? 1 : 1})`;  // 属于当前点击node的链路，高亮显示
      context.fillRect(n.x - 90, n.y, 180, 60);
      context.fill();
      context.fillStyle = "#fff";
      context.stroke();
      context.fillText(n.id && n.id.length > 25 ? `id: ${n.id.substring(0,25)}...`: `id: ${n.id}`, n.x - 80, n.y + 25);
      context.fillText(n.level && n.level.length > 25 ? `level: ${n.level.substring(0,25)}...`: `level: ${n.level}`, n.x - 80, n.y + 40);
    });
    context.restore();
  }
  // TODO 接口
  graph = {
    initialize
  };
  return graph;
}
const init = force_zoom_canvas('topo-canvas');
init.initialize([
  {"id": "1", level: 0}, {"id": "2", level: 1},{"id": "3", level: 1},{"id": "4", level: 1},{"id": "5", level: 2},{"id": "6", level: 2},{"id": "7", level: 2},{"id": "8", level: 2}
],[
  {"source": "1", "target": "2"},{"source": "1", "target": "3"},{"source": "1", "target": "4"},{"source": "2", "target": "5"},{"source": "3", "target": "5"},{"source": "3", "target": "6"},{"source": "3", "target": "8"},{"source": "4", "target": "7"}
]);
</script>
</html>

参考链接：
【数据可视化】可放缩可拖拽画布的力导向图

赏

谢谢你请我吃糖果

扫一扫，分享到微信

微信分享二维码

tag:

    缺失模块。
    1、请确保node版本大于6.2
    2、在博客根目录（注意不是yilia根目录）执行以下命令：
    npm i hexo-generator-json-content --save

    3、在根目录_config.yml里添加配置： 

      jsonContent:
    meta: false
    pages: false
    posts:
      title: true
      date: true
      path: true
      text: false
      raw: false
      content: false
      slug: false
      updated: false
      comments: false
      link: false
      permalink: false
      excerpt: false
      categories: false
      tags: true

很惭愧<br><br>只做了一点微小的工作<br>谢谢大家