vue 修改d3中的node节点图标

要修改d3中节点的图标，可以按照以下步骤实现：

1. 在Vue组件中引入d3库，并定义一个方法来生成d3图表。

import * as d3 from 'd3';

export default {
  data() {
    return {
      // ...
    };
  },

  methods: {
    generateD3Chart() {
      const svg = d3.select('#chart');

      // ...
    },
  },
};

2. 在generateD3Chart方法中，使用d3提供的方法创建节点，并为每个节点添加图标。

generateD3Chart() {
    const svg = d3.select('#chart');

    const nodes = [
      { id: 1, name: 'Node 1', type: 'A' },
      { id: 2, name: 'Node 2', type: 'B' },
      { id: 3, name: 'Node 3', type: 'C' },
    ];

    const node = svg.selectAll('.node')
        .data(nodes)
        .enter()
        .append('g')
        .attr('class', 'node');

    node.append('rect')
        .attr('width', 50)
        .attr('height', 50)
        .attr('fill', 'white')
        .attr('stroke', 'black');

    node.append('image')
        .attr('href', d => {
          if (d.type === 'A') {
            return '/path/to/image1.png';
          } else if (d.type === 'B') {
            return '/path/to/image2.png';
          } else {
            return '/path/to/image3.png';
          }
        })
        .attr('x', 5)
        .attr('y', 5)
        .attr('width', 40)
        .attr('height', 40);
},

在上面的代码中，我们为每个节点添加了一个image元素，并根据节点的类型选择不同的图标。注意，我们可以将图标的路径设置为一个函数，根据节点属性的不同返回不同的图标路径。

3. 要修改图标，可以在Vue组件的某个方法中修改节点的type属性，然后重新生成d3图表。

export default {
  // ...

  methods: {
    changeNodeType(nodeId, newType) {
      const nodes = this.nodes;

      for (let i = 0; i < nodes.length; i++) {
        if (nodes[i].id === nodeId) {
          nodes[i].type = newType;
          break;
        }
      }

      this.generateD3Chart();
    },
  },
};

在上面的代码中，我们定义了一个方法来修改节点的type属性，并调用generateD3Chart方法重新生成d3图表。

4. 在Vue组件的mounted钩子函数中调用generateD3Chart方法。

export default {
  // ...

  mounted() {
    this.generateD3Chart();
  },
};

这样就可以在Vue中使用d3来创建图表，并修改节点的图标了。