Javascript .在d3上（'；鼠标悬停'；）

关于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',...)

当鼠标悬停时，我应该在代码中放置什么样的函数来代替

…

，以使单个文本标记的样式变得

可见

我检查了不同的解决方案，但都不起作用。 （一个是：）

此外，我想知道我对d3工作流程的看法是否正确（我昨天才开始学习d3，所以请耐心等待）：

.selectAll

在

.data

参数中迭代指定给它的内容。

---

在每次迭代中，将在给定位置创建一个文本对象（？），并使用给定的标签。

.style

指的是什么？单个对象

.selectAll

是否遍历？那么，对于迭代的每个对象，是否有多个

.style

？如何修改该对象？

d3.select（this）.style（'visibility'，'visibility'）

就足够了吗？（查看上面的链接，似乎不是这样…

您需要以下代码：

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

也就是说，隐藏元素永远不会获得鼠标事件，因此此代码永远不会被触发。您必须使用另一个接收事件的元素来触发出现的文本。见例。 正如注释中指出的，您可以使用

指针事件

属性使不可见元素接收鼠标事件

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

• svg.selectAll（'text'）

  选择所有

  text

  元素

• .data（数据集）

  将

  数据集中的数据绑定到那些选定的元素

• .enter（）

  选择输入选项。enter选择包含未找到匹配DOM元素的所有数据项，即

  dataset

  中没有匹配

  text

  元素的所有数据项

• .append（'text'）

  为enter选择中的每个项目追加一个新的

  text

  元素

---

输入选择中的每个项目也会发生其他一切。因此，您正在为每个添加的元素设置属性、样式等。如果在设置属性时传递函数，将使用绑定到特定DOM元素（

d

）的数据元素对其求值。

指针事件属性可用于使隐藏元素接收事件。不能将指针事件与不可见html一起使用，只能与不可见svg元素一起使用（）。html元素只允许自动和无。与@RobertLongson的评论相关：谢谢；事实上，我发现玩

opacity

可以解决这个问题。