对于 D3 堆叠条，我如何知道鼠标位于哪个条中？

Question

我在 d3 中得到了堆叠条，需要向其添加工具提示。我很难弄清楚鼠标在哪个栏中，知道如何确定鼠标在哪个栏中吗？

group.enter().append("g")
         .classed("layer", true)
         .attr("fill", d => z(d.key))
         .on("mouseover", function(d) {
          var num = d.key == "xkey" ? d[4][1] : d[4][1] - d[4][0]
          tip.html("<p>" + d.key + " " + num + "</p>")
            .style("left", (d3.event.pageX) + "px")
            .style("top", (d3.event.pageY - 28) + "px")
            .style("visibility", "visible")
         })
         .on("mouseout", function(d) {
          tip.style("visibility", "hidden")
         });

现在我只是硬编码以显示最后一根柱线的数据。也许我可以玩 xScale 和事件的 x 位置？或者这不是 D3 的方法？

这里是 plunker: http://plnkr.co/edit/6xB2Kzi46hWL37UjlgTs?p=preview

Answer 1

我建议您不要触发组上的鼠标悬停事件，而是触发 bars 上的事件。原因是您在组上的 data 绑定是针对男性和女性堆叠的，因此无法为您提供栏类型，即 Relations。但是在你的 bars 如果你 console.log(d) 在 mouseover 函数中你可以清楚地看到适当的 d.data.Relations。

但是，现在代替单个数字，您将得到一个数组，例如[0,70] 当您将鼠标悬停在女性上时，[60,130] 当您将鼠标悬停在男性上时，对于 2002 年的数据和 "Other" Relations。这个数组的工作方式是第一个值是当前值，而第二个值是总数。我们可以将此值与 d.data 中的值进行比较，以评估它是针对性别 Male 还是 Female。所以如果d[1]等于numF，即+d.data.Female的值，则为女性，但如果d[1]等于numF+numM，即(+d.data.Male) + (+d.data.Female) 的值的总和则它是男性，因为在这种情况下男性堆叠在女性之上，因为 keys 的顺序是 ["Female","Male"]。

   bars.enter().append("rect")
       .attr("width", xScale.bandwidth())
       .merge(bars)
        .on("mouseover", function(d) {
         console.log(d);
         // get number of females
         let numF = +d.data.Female;
         // get number of males
         let numM = +d.data.Male;
         // get the Relations
         let Relations = d.data.Relations;

         // Evaluate the gender by comparing the mouseover data value for d[1] to the numF for 'Female'
         // or 
         // numF+numM
         let gender,value;
         if (d[1] === numF){
           gender = 'Female';
           value = numF;
         }else if (d[1] === numF+numM) {
           gender = 'Male';
           value = numM;
         }

        //produce the tooltip
        tip.html("<p>" +Relations + "<br>" + gender + ": " + value + "</p>")
        .style("left", (d3.event.pageX) + "px")
        .style("top", (d3.event.pageY - 28) + "px")
        .style("visibility", "visible");
        })
        .on("mouseout", function(d) {
          tip.style("visibility", "hidden");
        })
   .transition().duration(speed)
       .attr("x", d => xScale(d.data.Relations))
       .attr("y", d => yScale(d[1]))
       .attr("height", d => yScale(d[0]) - yScale(d[1]));

请注意，我必须更改工具提示的 css 以使其稍微高一点，因为我在 Relations 和 Gender: number 之间添加了一个
。

Working Plunker as a Demo.

P.S。为了清晰起见，我还清理了一些代码，例如分号，并将 <svg> 和工具提示 <div> 放在 <body> 内而不是

之外。

对于 D3 堆叠条，我如何知道鼠标位于哪个条中？

How do I know which bar the mouse is in for D3 stacked bar?

javascript

css

tooltip

d3.js

stacked-chart