十分钟搞定，一行代码实现D3.js + Vue.js版拓扑图

前端

2024-01-13 16:15:14

前言

拓扑图是一种常见的网络关系图，可以帮助人们直观地理解复杂的数据结构和关系。它在各种领域都有着广泛的应用，比如网络工程、软件开发、金融分析等。

如果你是前端开发人员，那么使用D3.js和Vue.js来生成拓扑图是一个不错的选择。D3.js是一个功能强大的数据可视化库，而Vue.js则是一个流行的前端框架，两者结合可以让你轻松实现各种复杂的数据可视化效果。

准备工作

在开始之前，你需要确保你的电脑上已经安装了Node.js和Vue.js CLI。如果还没有，请先安装它们。

项目搭建

首先，创建一个新的Vue.js项目：

vue create d3-topo

进入项目目录：

cd d3-topo

安装D3.js：

npm install d3

安装Vue.js D3.js插件：

npm install vue-d3

实现拓扑图

在src/components目录下创建一个新的组件文件Topology.vue：

<template>
  <div id="topology"></div>
</template>

<script>
import * as d3 from 'd3'
import { mount } from 'vue-d3'

export default {
  mounted() {
    // 数据源
    const data = {
      nodes: [
        { id: 1, name: '节点1' },
        { id: 2, name: '节点2' },
        { id: 3, name: '节点3' }
      ],
      links: [
        { source: 1, target: 2 },
        { source: 2, target: 3 }
      ]
    }

    // 创建拓扑图
    const svg = d3.select('#topology')
      .append('svg')
      .attr('width', 500)
      .attr('height', 500)

    // 创建力导向模拟器
    const simulation = d3.forceSimulation(data.nodes)
      .force('link', d3.forceLink(data.links).id(d => d.id))
      .force('charge', d3.forceManyBody().strength(-100))
      .force('center', d3.forceCenter(250, 250))

    // 创建节点
    const nodes = svg.selectAll('circle')
      .data(data.nodes)
      .enter()
      .append('circle')
      .attr('r', 5)
      .attr('fill', 'blue')

    // 创建边
    const links = svg.selectAll('line')
      .data(data.links)
      .enter()
      .append('line')
      .attr('stroke', 'black')

    // 启动模拟器
    simulation.on('tick', () => {
      nodes
        .attr('cx', d => d.x)
        .attr('cy', d => d.y)

      links
        .attr('x1', d => d.source.x)
        .attr('y1', d => d.source.y)
        .attr('x2', d => d.target.x)
        .attr('y2', d => d.target.y)
    })
  }
}
</script>

在src/App.vue文件中，将Topology组件添加到视图中：

<template>
  <div id="app">
    <Topology />
  </div>
</template>

<script>
import Topology from './components/Topology.vue'

export default {
  components: {
    Topology
  }
}
</script>