Question

我在饼图上显示工具提示时遇到了麻烦。它一定是“路径”的东西。检查元素会显示div，但它似乎并不可见

      var path = svg.selectAll('path')
      .data(pie(dataset))
      .enter()
      .append('path')
      .attr('d', arc)
      .attr('fill', function(d, i) { 
        return color(d.data.label);
      })
      .on("mouseover", function (d) {
          d3.select("#tooltip")
              .style("left", d3.event.pageX + "px")
              .style("top", d3.event.pageY + "px")
              .style("opacity", 1)
              .select("#value")
              .text(d.value);
      })
          .on("mouseout", function () {
          // Hide the tooltip
          d3.select("#tooltip")
              .style("opacity", 0);
      });

fiddle

Answer 1

您的代码中的问题是，在html中，当您声明工具提示时，您离开了hidden属性：

<div id="tooltip" class="hidden">

你永远不会在mousover上删除它，所以即使不透明度为1，工具提示仍然是隐藏的。

我通过在init：

上将不透明度设置为0来解决您的问题

<div id="tooltip" style="opacity:0">

为了解决这个问题，我查看了chrome控制台（元素选项卡），发现除了hidden之外，工具提示的所有属性都已正确更新。

fiddle

饼图上的D3 html div工具提示

1 个答案: