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 正如评论中指出的那样，您可以使用pointer-events属性使不可见元素接收鼠标事件。

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

svg.selectAll('text')选择所有text元素。

.data(dataset)将dataset中的数据绑定到选定的元素。

.enter()选择输入选择。输入选择包含未找到匹配的DOM元素的所有数据项，即dataset中没有匹配text元素的所有数据。

.append('text')为回车选择中的每个商品添加新的text元素。

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

d3上的.on（'mouseover'）

1 个答案: