vue+d3画关系图

Vue.js 和 D3.js 都是非常流行的前端库，可以结合使用来创建交互式的关系图。

下面是一个简单的步骤：

1. 安装 Vue.js 和 D3.js

   npm install vue d3

2. 在 Vue 组件中引入 D3.js

   import * as d3 from "d3";

3. 在 Vue 组件中创建 SVG 元素

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

4. 在 Vue 组件的 mounted 方法中使用 D3.js 创建关系图

   mounted() {
     const svg = d3.select(this.$refs.svg);
     
     // 创建关系图代码
   }

在这里，你可以使用 D3.js 的力导向布局（force layout）来创建关系图。可以使用 D3.js 提供的 force() 方法来创建力导向布局，并使用 link() 和 node() 方法来绑定数据。

   const nodes = [
     { id: 1, name: "Node 1" },
     { id: 2, name: "Node 2" },
     { id: 3, name: "Node 3" },
     { id: 4, name: "Node 4" }
   ];
   
   const links = [
     { source: 1, target: 2 },
     { source: 2, target: 3 },
     { source: 3, target: 1 },
     { source: 4, target: 1 }
   ];
   
   const simulation = d3.forceSimulation(nodes)
     .force("link", d3.forceLink(links))
     .force("charge", d3.forceManyBody())
     .force("center", d3.forceCenter(width / 2, height / 2));
   
   const link = svg.selectAll("line")
     .data(links)
     .enter().append("line")
     .attr("stroke", "#999")
     .attr("stroke-opacity", 0.6)
     .attr("stroke-width", d => Math.sqrt(d.value));
   
   const node = svg.selectAll("circle")
     .data(nodes)
     .enter().append("circle")
     .attr("r", 5)
     .attr("fill", "#69b3a2");
   
   node.call(drag(simulation));
   
   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 drag(simulation) {
     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;
     }
   
     return d3.drag()
         .on("start", dragstarted)
         .on("drag", dragged)
         .on("end", dragended);
   }

在上述代码中，我们创建了一个基本的力导向布局，并将节点和链接绑定到了 SVG 元素上。我们还添加了拖拽事件，以便用户可以拖动节点。

5. 在 Vue 组件中添加样式

   <style>
   svg {
     width: 100%;
     height: 100%;
   }
   </style>

这里只是一个简单的例子，你可以根据自己的需求来创建更复杂的关系图。