Question

我刚刚开始学习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使用。

Answer 1

如果出于某种原因，您不能在D3侦听器中使用this（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代码中，它们被命名为{{ 1}}（用于节点，n（用于索引））。

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

1 个答案: