javascript - 工具提示在带有两个图表的 d3.js 中消失

Question

我在 d3.js 中创建了一个带有工具提示的 map ，当您将鼠标悬停在其中的一部分时会显示该工具提示。它工作得很好，但是当我在另一个 div 中添加另一个条形图时， map 中的工具提示消失了。条形图工具提示本质上是相同的，但我给了它不同的 ID。以下是我为 map 创建第一个 map 的方法。

<div id="map">
  <div id="tooltip" class="hidden">
    <p><strong id ="county"></strong></p>
    <p>Avergae <strong id="value"></strong></p>
  </div>
</div>
<div id="barchart">
  <div id="tooltipbar" class="hidden">
    <p>Avergae is <strong id="valuebar"></strong></p>
  </div>
    <div id="bars">
      <h3>Bar Chart</h3>
    </div>
</div> 

CSS 是:

 #tooltip {
  position: absolute;
  width: 200px;
  height: auto;
  padding: 10px;
  background-color: white;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  -webkit-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4);
  -moz-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4);
  box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4);
  pointer-events: none;
}

#tooltip.hidden {
    display: none;
}

它在 d3 代码中使用为

var mouseMove = function(d) {
    var x = d3.event.pageX + 5;
    var y = d3.event.pageY + 5;

    if (d.properties.value > 0) {
        d3.select("#tooltip")
          .style("left", x + "px")
          .style("top", y + "px")
        d3.select("#tooltip #countyname")
          .text(d.id);
        d3.select("#tooltip #average")
          .text('$' + d.properties.value);
        d3.select("#tooltip").classed("hidden", false);
    }

};

var mouseOut = function() {
    d3.select("#tooltip").classed("hidden", true);
    d3.select(this.parentNode.appendChild(this))
        .style({
          "stroke": "#FFFFFF",
          "stroke-width": 1,
          'stroke-linejoin':'round',
          'stroke-linecap': 'round',
          'opacity': 1, });
};

 g.append("g")
    .attr("class", "land")
    .selectAll("path")
    .data(counties.features)
    .enter().append("path")
    .attr("d", path)
    .style("fill", function(d) {
        var value = d.properties.value;

        if (value) {
          return color(value);
        } else {
          return "#ccc"
        }
    })
    .on("mouseover", function(d) {
        if (d.properties.value > 0) {
        d3.select(this.parentNode.appendChild(this)) // workaround for bringing elements to the front (ie z-index)
            .style({
                "stroke": "#333",
                "stroke-width": 1,
                'stroke-linejoin':'round',
                'stroke-linecap': 'round',
                'cursor':'pointer',
                'opacity': 0.7,
            });
        }
    })
    .on("mousemove", mouseMove)
    .on("mouseout", mouseOut);

tooltipbar 的代码与 tooltip 相同。我可能做错了什么？以及如何解决这个问题。我完全被这个自动取款机难住了。

Answer 1

我用来显示:

d3.select("#tooltip").style('display','block');

隐藏:

d3.select("#tooltip").style('display','none');

试试这个，也许它也适合你。

您的代码:

var mouseMove = function(d) {
    var x = d3.event.pageX + 5;
    var y = d3.event.pageY + 5;

    if (d.properties.value > 0) {
        d3.select("#tooltip")
          .style("left", x + "px")
          .style("top", y + "px")
        d3.select("#tooltip #countyname")
          .text(d.id);
        d3.select("#tooltip #average")
          .text('$' + d.properties.value);
        d3.select("#tooltip").style('display','block'); <=== HERE SHOW
    }

};

var mouseOut = function() {
    d3.select("#tooltip").style('display','none');    <=== HERE HIDE
    d3.select(this.parentNode.appendChild(this))
        .style({
          "stroke": "#FFFFFF",
          "stroke-width": 1,
          'stroke-linejoin':'round',
          'stroke-linecap': 'round',
          'opacity': 1, });
};