Я пытаюсь добавить всплывающую подсказку к карте Choropleth d3 с эффектом наведения на этой странице https://www.d3 -graph-gallery.com / graph / choropleth_hover_effect.html 
Похоже, что всплывающая подсказка добавляется к svg, так как я могу осмотреть карту и увидеть внутренний div с предполагаемым текстом, который должен отображаться при наведении курсора на страны, но при этом ничего не отображается, хотя параметры всплывающей подсказки кажутсяобновляться при каждом наведении.
Я взял подсказку из другого графика, так как текущая карта, которую я пытаюсь реализовать, не имеет подсказки. Я попытался создать переменную всплывающей подсказки в функции ready (error, topo) и стилях / данных в функциях mouseover и mouseleave, но она не отображает всплывающую подсказку для стран
Вот код в моем xhtml
<head>
<!-- Load d3.js and the geo projection plugin -->
<script src="https://d3js.org/d3.v4.js"></script>
<script src="https://d3js.org/d3-scale-chromatic.v1.min.js"></script>
<script src="https://d3js.org/d3-geo-projection.v2.min.js"></script>
<script>
jQuery(document).ready(function() {
// The svg
var svg = d3.select("svg"),
width = +svg.attr("width"),
height = +svg.attr("height");
// Map and projection
var path = d3.geoPath();
var projection = d3.geoMercator()
.scale(70)
.center([0,20])
.translate([width / 2, height / 2]);
// Data and color scale
var data = d3.map();
var colorScale = d3.scaleThreshold()
.domain([100000, 1000000, 10000000, 30000000, 100000000, 500000000])
.range(d3.schemeBlues[7]);
// Load external data and boot
d3.queue()
.defer(d3.json, "https://raw.githubusercontent.com/holtzy/D3-graph-gallery/master/DATA/world.geojson")
.defer(d3.csv, "https://raw.githubusercontent.com/holtzy/D3-graph-gallery/master/DATA/world_population.csv", function(d) { data.set(d.code, +d.pop); })
.await(ready);
var tooltip = d3.select("#my_dataviz")
.append("div")
.style("opacity", 0)
.attr("class", "tooltip")
.style("background-color", "white")
.style("border", "solid")
.style("border-width", "2px")
.style("border-radius", "5px")
.style("padding", "5px")
function ready(error, topo) {
let mouseOver = function(d) {
d3.selectAll(".Country")
.transition()
.duration(200)
.style("opacity", .5)
d3.select(this)
.transition()
.duration(200)
.style("opacity", 1)
.style("stroke", "black")
tooltip.style("opacity", 1)
.html("The exact value of<br/>this cell is: " + d.pop)
.style("left", (d3.mouse(this)[0]+70) + "px")
.style("top", (d3.mouse(this)[1]) + "px")
}
let mouseLeave = function(d) {
d3.selectAll(".Country")
.transition()
.duration(200)
.style("opacity", .8)
d3.select(this)
.transition()
.duration(200)
.style("stroke", "transparent")
tooltip.style("opacity", 0)
}
// Draw the map
svg.append("g")
.selectAll("path")
.data(topo.features)
.enter()
.append("path")
// draw each country
.attr("d", d3.geoPath()
.projection(projection)
)
// set the color of each country
.attr("fill", function (d) {
d.total = data.get(d.id) || 0;
return colorScale(d.total);
})
.style("stroke", "transparent")
.attr("class", function(d){ return "Country" } )
.style("opacity", .8)
.on("mouseover", mouseOver )
.on("mouseleave", mouseLeave )
}
})
</script>
</head>
<div>
<div>
<h1>Graphs</h1>
<!-- Create an element where the map will take place -->
<svg id="my_dataviz" width="400" height="300"></svg>
</div>
</div>
После рендеринга карты (работающей только с функцией зависания) я проверяю ее и вижу следующее.
Если я меняю страну, данные в div всплывающей подсказки меняются.
- ОБНОВЛЕНИЕ -
Следуя совету @enxaneta, я попытался вывести div вне svg. Результат - всплывающая подсказка в отдельном элементе div. На этот раз всплывающая подсказка появляется на странице, но отображается внизу карты, а не поверх нее, как бы я хотел ее видеть.
Я все еще выясняю, как реализовать foreignObject.
- ОБНОВЛЕНИЕ 2 -
Добавление абсолютной позиции подсказки для маркера div и размещения его относительно зависания мыши,Однако, несмотря на то, что он вертикально выровнен с выбранной страной, он находится вверху страницы.
<style>
.tooltip{position:absolute;}
</style>
