vue实现力导向

Vue 实现力导向图

在 Vue 中实现力导向图通常需要借助第三方库，如 D3.js 或 ECharts。以下是两种常见的实现方式：

使用 D3.js 实现力导向图

安装 D3.js：

npm install d3

在 Vue 组件中使用 D3.js：

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

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

export default {
  mounted() {
    this.initForceGraph();
  },
  methods: {
    initForceGraph() {
      const width = 800;
      const height = 600;
      const data = {
        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 }
        ]
      };

      const svg = d3.select(this.$refs.forceGraph)
        .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")
        .attr("stroke-width", 2);

      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, d) {
        if (!event.active) simulation.alphaTarget(0.3).restart();
        d.fx = d.x;
        d.fy = d.y;
      }

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

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

使用 ECharts 实现力导向图

安装 ECharts：

npm install echarts

在 Vue 组件中使用 ECharts：

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

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

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

关键点说明

D3.js 提供了更底层的控制，适合需要高度自定义的场景。需要手动处理节点位置计算、拖拽交互等细节。

ECharts 的力导向图实现更简单，内置了常见的交互功能，如缩放、拖拽等，适合快速实现标准化的力导向图。

两种方式都可以与 Vue 的数据绑定机制结合，通过响应式数据更新图表。当节点或关系数据变化时，重新渲染图表即可。

对于移动端或性能敏感场景，可以考虑使用 WebGL 实现的图表库，如 G6 或 Three.js，它们能处理更大规模的图数据。