Javascript 在Vue方法挂钩中使用d3.select时，如何解决未定义的错误？

我正在将另一个项目中的一些d3图形移植到一个基于Vue的个人项目中。除了尝试使用arc.centroid（d）方法将标签居中放置在饼图的圆弧中外，其他一切都正常工作。我一直有两个错误，我将在下面解释

我的弧函数和饼函数都在计算钩子中

下面我的标签函数在我的方法钩子中：

pieLabel(width, height, margin) {
      d3.select(".pie-chart-wrapper svg")
        .append("g")
        .attr("class", "pie-chart-labels")
        .attr(
          "transform",
          `translate(${width / 2 + margin},${height / 2 + margin})`
        )
        .selectAll("text")
        .data(this.pie)
        .enter()
        .append("text")
        .style("fill", "black")
        .attr("text-anchor", "middle")
        .text(d => `${d3.format(",")(d.value)}`)
        .each(d => {
          const center = this.arc.centroid(d);

          d3.select(this)
            .attr("x", center[0])
            .attr("y", center[1]);
        });
    }

我经常遇到的错误是this.arc未定义，this.setAttribute不是函数

如何解决这些错误

在移动了一些东西之后，我能够得到这个错误。弧消失。然后我记录了“this”，它返回了一堆Vue原型，这让我相信Vue认为我试图引用一个不存在的Vue元素，因此导致了错误

无论如何，我将代码返回到在Vue外部工作时的状态，但在Vue挂钩内部返回两个错误

---

这不是针对特定的项目。我只是想了解Vue和d3.js是如何协同工作的。

您遇到的是的

这个

范围。简言之：他们从外部范围使用

这个

，而不是内部范围。相比之下，以下措施应该有效：

。每个（函数（d）{
常数中心=此弧形心（d）；
d3.选择（本）
.attr（“x”，中心[0]）
.attr（“y”，中间[1]）；
});

因为现在，

此

指向

文本

节点，而不是Vue范围