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

我已经在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> 

它在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);

工具提示栏

的代码与

工具提示

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

我用来表示：

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, });
};

var mouseMove=函数（d）{
var x=d3.event.pageX+5；
变量y=d3.event.pageY+5；
如果（d.properties.value>0）{
d3.选择（“工具提示”）
.样式（“左”，x+“px”）
.样式（“顶部”，y+“px”）
d3.选择（“#工具提示#countyname”）
.文本（d.id）；
d3.选择（“工具提示”平均值）
.text（“$”+d.properties.value）；
d3.选择（“#工具提示”）.style（'display'，'block'）；我用来显示：

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, });
};

var mouseMove=函数（d）{
var x=d3.event.pageX+5；
变量y=d3.event.pageY+5；
如果（d.properties.value>0）{
d3.选择（“工具提示”）
.样式（“左”，x+“px”）
.样式（“顶部”，y+“px”）
d3.选择（“#工具提示#countyname”）
.文本（d.id）；
d3.选择（“工具提示”平均值）
.text（“$”+d.properties.value）；
d3.选择（“#工具提示”）.style（'display'，'block'）；