d3.jsのツールチップが2つの図表で消えます

Question

d3.jsにマップの一部を表示するときに表示されるツールチップが作成されました。それはすべてうまく動作しますが、別のdivに別の棒グラフを追加したときに地図のツールチップが消えました。 barchartのツールチップは本質的に同じですが、別の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; 
} 

それはtooltipbarのコード

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コードで使用される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, }); 
};