d3.select(this)适用于鼠标悬停，但不适用于鼠标悬停中调用的函数 [英] d3.select(this) works on mouseover, but not on function called in mouseover

问题描述

我是javascript的新手，目前在尝试进行d3选择时难以选择 this 对象.我用一个我正在调用的函数和一个on mousemove事件制作了以下示例:

I am new to javascript and currently struggling with selecting the this object while trying to do a d3 selection. I've made the following example, with a function I'm calling, and an on mousemove event:

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等效果的函数来组织代码.但是由于这些功能，我遇到了无法在该鼠标悬停功能内执行 d3.select(this)的问题.

In my main script not shown here, I am organizing my code by writing functions that handle each of the mousemove, mouseover, etc. effects. However because of these functions, I am running into this problem where I can't do d3.select(this) inside of that mouseover function... Any thoughts on what I should be doing differently?

我应该将 this 作为参数传递给我的changeFont()函数吗?还是应该以其他方式访问此?

Should I pass this as a parameter to my changeFont() function? Or should I access this in a different way?

谢谢！

推荐答案

尽管安德鲁(Andrew)的答案可能是最合适的您从字面上回答这个问题，我想再加上我的两分钱.您真正的问题似乎不是持有this，而是反复访问该元素以应用您的操作.由于在JavaScript中摆弄this可能会很麻烦，因此可能值得通过直接传递选择内容而采取略有不同的方法.这也将提高性能，因为无需一遍又一遍地重新选择this.

Although Andrew's answer might be the best fit if you take the question literally, I would like to add my two cents to it. Your real problem does not seem to be to get a hold of this, but to repeatedly get access to that element to apply you manipulations. Since fiddling around with this can be a pain in JavaScript it might be worth taking a slightly different approach by directly passing the selection instead. This will also improve performance as there is no need to re-select this over and over again.

首先，让我们稍微重构一下changeFont()函数以接受选择对象.

First, let us slightly refactor your changeFont() function to accept a selection object.

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

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

Note, how this makes the function more generally applicable as it does not make any assumptions about the selection passed into it. It could be your d3.select(this), a selection containing multiple elements or any other D3 selection object. Additionally, you do not need to preserve the previous this scope.

基本上有两种方法可以调用此函数.

There are basically two ways of calling this function.

1. 显而易见的是，在调用函数时，直接将选择作为参数传递:

1. The obvious one will directly pass the selection as an argument when calling the function:

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

幸运的是，通过D3自己的 selection.call() 甚至允许在需要对同一选择进行多次调用时进行方法链接.

Fortunately, there is a more elegant way of doing it by resorting to D3's own selection.call() which even allows for method chaining if you need to do multiple calls on the same selection.

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);

}

这篇关于d3.select(this)适用于鼠标悬停，但不适用于鼠标悬停中调用的函数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！