Javascript 在Vue中使用D3/不使用选择器？

我正在尝试实现一个饼图，非常类似于此：

我可以很好地跟随；即，我可以手动将这些添加到我的模板中：

var svg = d3.select("body")
    .append("svg")
    .append("g")

svg.append("g")
    .attr("class", "slices");
svg.append("g")
    .attr("class", "labels");
svg.append("g")
    .attr("class", "lines");

其中，我刚刚创建了一个模板，如下所示：

<svg width="200" height="200">
      <g :style="{transform: `translate(${width / 2}px, ${height / 2}px)`}">
        <g class="labels"></g>
        <g class="slices">
          <path
            v-for="(s, i) in slices"
            class="slice"
            :key="i"
            :d="s.d"
            :fill="s.fill"></path>
        </g>
        <g class="lines"></g>
      </g>      
    </svg>

---

我想可能会有一些d3方法，我可以将数据反馈给它们，以获取每个饼片的相关

d/fill

信息，但我不确定d3是否打算以这种方式使用。我看错了吗？

您现在要做的是构建两次UI（SVG元素），一次是使用d3（

.select（）

/

.append（）

），一次是使用Vue（html模板）。这没有多大意义，所以您需要找到另一种方式让Vue和d3进行合作

下面是一个示例，它将Vue用于UI，将d3用于数据处理：

var slice = svg.select(".slices").selectAll("path.slice")
    .data(pie(data), key);

slice.enter()
    .insert("path")
    .style("fill", function(d) { return color(d.data.label); })
    .attr("class", "slice");