vue.js - D3 VUEjs 添加 Attr 和 or 调用

Question

我在我的 VUEjs 应用程序中使用 D3..

我创建了一个循环遍历我的数据点以创建多个圆圈的 svg。我正在努力获得正确的“调用（拖动）”功能或添加额外的属性？

computed: {
    points() {
      return this.$store.getters["drawInfo/drawCircle"];
    }
  },
  
  created() {
    var drag = d3
      .drag()
      .subject(function(d) {
        return d;
      })
      .on("start", dragstarted)
      .on("drag", dragged)
      .on("end", dragended);

    function dragstarted(d) {
      d3.event.sourceEvent.stopPropagation();
      d3.select(this).classed("dragging", true);
    }

    function dragged(d) {
     
      d3.select(this)
        .attr("cx", (d.x = d3.event.x))
        .attr("cy", (d.y = d3.event.y));
    }

    function dragended(d) {
      d3.select(this).classed("dragging", false);
    }
  },

<g>
    <svg v-for="(item, index) in points" :key="index" @click="selected(item, index)">
      <circle
        :r="item.radius"
        :cx="item.x"
        :cy="item.y"
        :fill="item.fill"
        :stroke="item.stroke"
        :stroke-width="item.strokeWidth"
      />
     
    </svg>
  </g>

Answer 1

        d3.select(`._${item.index}`)  
          .style("stroke-width", 2)
          .style("fill", "black");

 <circle
        :r="item.radius"
        :cx="item.x"
        :cy="item.y"
        :fill="item.fill"
        :stroke="item.stroke"
        :stroke-width="item.strokeWidth"
        :class="`_${item.index}`"
      />

其实很简单，只是添加了一个类属性，然后用 d3.select 来选择