.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 ）的數據元素來評估它。