当前位置：首页 > VUE

vue实现力导向

2026-01-14 08:36:55VUE

Vue 实现力导向图的方法

力导向图（Force-Directed Graph）是一种通过物理模拟展示节点关系的可视化方式。在 Vue 中可以通过以下方法实现：

使用 D3.js 结合 Vue

安装 D3.js 依赖：

npm install d3

在 Vue 组件中引入 D3 并绘制力导向图：

<template>
  <div ref="graphContainer"></div>
</template>

<script>
import * as d3 from 'd3';

export default {
  mounted() {
    this.drawForceGraph();
  },
  methods: {
    drawForceGraph() {
      const width = 800;
      const height = 600;
      const data = {
        nodes: [{id: 1}, {id: 2}, {id: 3}],
        links: [{source: 1, target: 2}, {source: 2, target: 3}]
      };

      const svg = d3.select(this.$refs.graphContainer)
        .append('svg')
        .attr('width', width)
        .attr('height', height);

      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(width / 2, height / 2));

      const link = svg.append('g')
        .selectAll('line')
        .data(data.links)
        .enter().append('line')
        .attr('stroke', '#999');

      const node = svg.append('g')
        .selectAll('circle')
        .data(data.nodes)
        .enter().append('circle')
        .attr('r', 10)
        .attr('fill', '#69b3a2')
        .call(d3.drag()
          .on('start', dragstarted)
          .on('drag', dragged)
          .on('end', dragended));

      simulation.on('tick', () => {
        link
          .attr('x1', d => d.source.x)
          .attr('y1', d => d.source.y)
          .attr('x2', d => d.target.x)
          .attr('y2', d => d.target.y);

        node
          .attr('cx', d => d.x)
          .attr('cy', d => d.y);
      });

      function dragstarted(event) {
        if (!event.active) simulation.alphaTarget(0.3).restart();
        event.subject.fx = event.subject.x;
        event.subject.fy = event.subject.y;
      }

      function dragged(event) {
        event.subject.fx = event.x;
        event.subject.fy = event.y;
      }

      function dragended(event) {
        if (!event.active) simulation.alphaTarget(0);
        event.subject.fx = null;
        event.subject.fy = null;
      }
    }
  }
};
</script>

使用 Vue-Force-Graph 专用库

安装 vue-force-graph：

npm install vue-force-graph

基本用法示例：

vue实现力导向

<template>
  <force-graph
    :graphData="graphData"
    :nodeAutoColorBy="'id'"
    :linkDirectionalParticles="2"
  />
</template>

<script>
import ForceGraph from 'vue-force-graph';

export default {
  components: { ForceGraph },
  data() {
    return {
      graphData: {
        nodes: [
          { id: 1, name: 'Node 1' },
          { id: 2, name: 'Node 2' },
          { id: 3, name: 'Node 3' }
        ],
        links: [
          { source: 1, target: 2 },
          { source: 2, target: 3 }
        ]
      }
    };
  }
};
</script>

使用 ECharts 实现

安装 ECharts：

npm install echarts

Vue 组件实现：

<template>
  <div ref="chart" style="width: 800px; height: 600px;"></div>
</template>

<script>
import * as echarts from 'echarts';

export default {
  mounted() {
    this.initChart();
  },
  methods: {
    initChart() {
      const chart = echarts.init(this.$refs.chart);
      const option = {
        series: [{
          type: 'graph',
          layout: 'force',
          data: [{
            name: 'Node 1',
            category: 0
          }, {
            name: 'Node 2',
            category: 0
          }, {
            name: 'Node 3',
            category: 1
          }],
          links: [{
            source: 'Node 1',
            target: 'Node 2'
          }, {
            source: 'Node 2',
            target: 'Node 3'
          }],
          categories: [{}, {}],
          roam: true,
          label: {
            show: true
          },
          force: {
            repulsion: 100,
            edgeLength: 100
          }
        }]
      };
      chart.setOption(option);
    }
  }
};
</script>