工具提示在 d3.js 中消失，带有两个图表答案

【问题标题】：Tooltip disappears in d3.js with two charts工具提示在 d3.js 中消失，带有两个图表
【发布时间】：2016-05-08 18:14:13
【问题描述】：

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

<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 相同。我可能做错了什么？以及如何解决这个问题。我完全被这个atm难住了。

【问题讨论】：

标签： javascript html css d3.js tooltip

【解决方案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, });
};

【讨论】：