在Vue.js组件中使用D3鼠标事件坐标

尤利亚·米赫特（Iulia Mihet）

我刚刚开始学习D3，并且试图将散点图集成到Vue.js组件中。一切顺利，直到我想在鼠标悬停上集成工具提示。

mouseover函数的原始代码如下所示：

var mousemove = function(d) {
    tooltip
        .html("Sold quantity: " + d.quantity + "<br> Object price: " + d.price)
        .style("left", (d3.mouse(this)[0]+90) + "px")
        .style("top", (d3.mouse(this)[1]) + "px")
};

然后，将其附加到on事件方法。

现在，如果我尝试获取代码并将其在Vue.js中使用，则会收到错误消息：

未捕获的TypeError：node.getBoundingClientRect不是函数

我知道为什么会这样。基本上，该this实例现在是整个Vue.js组件实例。以前，this仅是将鼠标悬停在DOM元素上。

在线上有一些解决方案，但是没有一个解决方案可以解决这种特殊情况，在这种情况下，有人只想访问/设置正确的this上下文以供d3使用。

杰拉尔多·富塔多

如果出于某种原因不能this在D3侦听器中使用（vue.js只是这些原因之一），请结合使用第三和第二个参数：

var mousemove = function(d,i,n) {
    tooltip
        .html("Sold quantity: " + d.quantity + "<br> Object price: " + d.price)
        .style("left", (d3.mouse(n[i])[0]+90) + "px")
        .style("top", (d3.mouse(n[i])[1]) + "px")
};

简而言之，更改this为a[b]，其中a第三个参数b是第二个参数（在大多数D3代码中，它们是n为节点和i索引命名的）。