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等效果的函数来组织我的代码.但是由于这些功能,我遇到了这个问题,我无法在鼠标悬停功能中进行d3.select(this)…对于我应该采取哪些不同的做法?

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

谢谢!

解决方法

虽然安德鲁的 answer可能是最合适的,如果你从字面上理解问题,我想加上我的两分钱.你真正的问题似乎不是要抓住这个,而是反复访问该元素以应用你的操作.由于摆弄这可能是JavaScript的痛苦,因此可能值得通过直接传递选择而采用稍微不同的方法.这也将提高性能,因为无需一遍又一遍地重新选择.

首先,让我们稍微重构你的changeFont()函数来接受一个选择对象.

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

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

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

>当调用函数时,显而易见的将直接将选择作为参数传递:

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

>幸运的是,有一种更优雅的方式,通过使用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);

}

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐


kindeditor4.x代码高亮功能默认使用的是prettify插件,prettify是Google提供的一款源代码语法高亮着色器,它提供一种简单的形式来着色HTML页面上的程序代码,实现方式如下: 首先在编辑器里面插入javascript代码: 确定后会在编辑器插入这样的代码: <pre
这一篇我将介绍如何让kindeditor4.x整合SyntaxHighlighter代码高亮,因为SyntaxHighlighter的应用非常广泛,所以将kindeditor默认的prettify替换为SyntaxHighlighter代码高亮插件 上一篇“让kindeditor显示高亮代码”中已经
js如何实现弹出form提交表单?(图文+视频)
js怎么获取复选框选中的值
js如何实现倒计时跳转页面
如何用js控制图片放大缩小
JS怎么获取当前时间戳
JS如何判断对象是否为数组
JS怎么获取图片当前宽高
JS对象如何转为json格式字符串
JS怎么获取图片原始宽高
怎么在click事件中调用多个js函数
js如何往数组中添加新元素
js如何拆分字符串
JS怎么对数组内元素进行求和
JS如何判断屏幕大小
js怎么解析json数据
js如何实时获取浏览器窗口大小
原生JS实现别踩白块小游戏(五)
原生JS实现别踩白块小游戏(一)