.on（'mouseover'）on 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-触发mouseover事件 ）

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

Answer 1

您将需要以下代码：

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

也就是说，隐藏元素永远不会获得鼠标事件，因此永远不会触发此代码。 您必须使用另一个确实会接收事件的元素来触发文本的显示。 参见例如 这个问题 。 如注释中所指出的，您可以使用pointer-events属性使不可见元素接收鼠标事件。

这是运行此代码的幕后发生的事情：

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

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