.on ('mouseover') 在 d3

Question

我有一个关于 d3 中的 .on('mouseover') 方法的澄清问题。 我的代码是：

svg.selectAll('text')
            .data(dataset)
            .enter()
            .append('text')
            .attr('x',function(d){
              return xScale(d[0]);
            })
            .attr('y',function(d){
              return yScale(d[1]);
            })
            .text(function(d) {
                return d[0] + ',' + d[1];
              })
            .style('visibility','hidden');
            .on('mouseover',...)

我应该在代码中放置什么样的函数而不是...，以使鼠标悬停时单个文本标签的样式变为visible？

我检查了不同的解决方案，但没有一个有效。 （一个是：d3 - trigger mouseover event）

此外，我想知道我对 d3 工作流程的看法是否得到纠正（我昨天才开始学习 d3，所以请耐心等待..）： .selectAll 迭代在 .data 参数中提供给它的内容。 在每次迭代中，都会在给定位置和给定标签处创建一个文本对象（？）。 .style 指的是什么？单个对象.selectAll 迭代？那么每个迭代的对象是否有多个.style？以及如何修改该对象？ d3.select(this).style('visibility','visible') 够吗？ （看上面的链接好像不是这样……）

Answer 1

您需要以下代码：

.on("mouseover", function() { d3.select(this).style("visibility", "visible"); });

也就是说，隐藏的元素永远不会得到鼠标事件，所以这段代码永远不会被触发。您必须使用另一个确实接收事件的元素来触发出现的文本。参见例如this question. 正如 cmets 中所指出的，您可以使用 pointer-events 属性使不可见元素接收鼠标事件。

这是运行此代码时在后台发生的情况：

• svg.selectAll('text') 选择所有 text 元素。
• .data(dataset) 将dataset 中的数据绑定到那些选定的元素。
• .enter() 选择回车选择。输入选择包含未找到匹配 DOM 元素的所有数据项，即 dataset 中没有匹配 text 元素的所有数据项。
• .append('text') 为输入选择中的每个项目附加一个新的 text 元素。

输入选择中的每个项目也会发生其他所有事情。因此，您正在为每个添加的元素设置属性、样式等。如果您在设置属性时传递函数，则会使用绑定到特定 DOM 元素 (d) 的数据元素来评估它。