Я создал карту в d3.js с подсказкой, которая отображается, когда вы навешиваете над ней часть. Он отлично работает, но когда я добавил еще одну гистограмму в другой div, всплывающая подсказка на карте исчезла. Всплывающая подсказка barchart, по сути, такая же, но я дал ей другой идентификатор. Вот как я создал первую карту.Подсказка исчезает в d3.js с двумя диаграммами
<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
. Что я могу сделать неправильно? И как это исправить. Я полностью потрясен этим атмом.