时间戳

首页 > 解决方案 > d3.select(this) 适用于鼠标悬停，但不适用于鼠标悬停中调用的函数

javascript - d3.select(this) 适用于鼠标悬停，但不适用于鼠标悬停中调用的函数

问题描述

我是 javascript 新手，目前在尝试进行 d3 选择时努力选择这个对象。我制作了以下示例，其中包含我正在调用的函数和 on mousemove 事件：

function changeFont() {
  d3.select(this)
    .attr('font-size', '2em')
}

...
.on('mousemove', function() {
  var mouse = d3.mouse(this);
  var xVal = mouse[0];

  // this would work, but not when its called in a function
  // d3.select(this)
  //  .attr('font-size', '2em')

  // this works
  d3.select(this)
   .attr("opacity", 1)

  // this doesnt
  changeFont()
});

在此处未显示的主脚本中，我通过编写处理每个 mousemove、mouseover 等效果的函数来组织我的代码。然而，由于这些功能，我遇到了这个问题，我不能在那个 mouseover 函数中执行d3.select(this) ......关于我应该做些什么不同的想法有什么想法吗？

我应该将此作为参数传递给我的 changeFont() 函数吗？或者我应该以不同的方式访问它？

谢谢！

标签： javascriptd3.jsthis

解决方案

尽管如果您从字面上理解这个问题，安德鲁的回答可能是最合适的，但我想在其中加上两分钱。您真正的问题似乎不是掌握this，而是反复访问该元素以应用您的操作。由于在 JavaScript 中摆弄this可能会很痛苦，因此可能值得采用一种稍微不同的方法，直接传递选择。这也将提高性能，因为无需一遍又一遍地重新选择this。

首先，让我们稍微重构您的changeFont()函数以接受选择对象。

function changeFont(selection) {
  selection
    .attr('font-size', '2em');
}

请注意，这如何使函数更普遍适用，因为它不对传递给它的选择做出任何假设。它可能是你的d3.select(this)，包含多个元素的选择或任何其他 D3 选择对象。此外，您不需要保留以前的this范围。

调用这个函数基本上有两种方法。

  1. 很明显，调用函数时会直接将选择作为参数传递：

    const d3This = d3.select(this);
changeFont(d3This);

  2. 幸运的是，有一种更优雅的方法可以使用 D3 自己selection.call()的方法，如果您需要对同一个选择进行多次调用，它甚至允许方法链接。

    function changeFont(selection) { selection.attr("font-size", "2em"); }
function changeFill(selection) { selection.attr("fill", "limegreen"); }
function changeOpacity(selection) { selection.attr("opacity", "0.1"); }

// ...
.on("mouseover", function() {
  // Call the functions for this element.
  d3.select(this)
    .call(changeFont)
    .call(changeFill)
    .call(changeOpacity);

  // Instead, you could also apply the same pattern to all texts.
  d3.selectAll("text")
    .call(changeFont)
    .call(changeFill)
    .call(changeOpacity);

}

推荐阅读