Вопрос : Как добавить простую всплывающую подсказку var (hover) к пузырьковой карте, на которой в d3 перекрываются круги?
Описание : следующий пузырь Карта имеет два перекрывающихся круга, размер которых определяется в зависимости от их количества за два разных года. Я хотел бы создать всплывающую подсказку, которая отображает год, количество и имя, когда я нахожу курсор над кругами по отдельности и перекрываюсь. При наведении курсора на перекрывающиеся круги я хотел бы, чтобы инструмент отображал:
year: 2010
count: 25
name: geoname
year: 2015
count: 100
name: geoname
и без наложения информации для соответствующего круга. Это простой пример, может быть много перекрывающихся кругов.
// The svg
var svg = d3.select("svg"),
width = +svg.attr("width"),
height = +svg.attr("height");
// Map, projection
var projection = d3.geoMercator()
.center([-123.1207, 49.2827])
.scale(30000)
.translate([ width/2, height/2 ])
// Data circles:
var markers = [
{long: -123.107840443438391, lat: 49.248610493457299 , group: "A", year: 2010, count: 25, name: "geoname"},
{long: -123.107840443438391, lat: 49.248610493457299 , group: "B", year: 2015, count: 100, name: "geoname"},
];
var url = "https://raw.githubusercontent.com/Bemrose/dat/master/dat.geojson";
// Load external data and boot
d3.json(url, function(data){
// Create a color scale
var color = d3.scaleOrdinal()
.domain(["A", "B", "C" ])
.range([ "#fa7d0f", "#0ffa4e", "#0f6dfa"])
// Add a scale for bubble count
var count = d3.scaleLinear()
.domain([1,100]) // What's in the data
.range([ 4, 50]) // count in pixel
// Draw the map
svg.append("g")
.selectAll("path")
.data(data.features)
.enter()
.append("path")
.attr("fill", "#d0d6d6")
.attr("d", d3.geoPath()
.projection(projection)
)
.style("stroke", "#969999")
.style("opacity", .3)
// Add circles:
svg
.selectAll("myCircles")
.data(markers)
.enter()
.append("circle")
.attr("class" , function(d){ return d.group })
.attr("cx", function(d){ return projection([d.long, d.lat])[0] })
.attr("cy", function(d){ return projection([d.long, d.lat])[1] })
.attr("r", function(d){ return count(d.count) })
.style("fill", function(d){ return color(d.group) })
.attr("stroke", function(d){ return color(d.group) })
.attr("stroke-width", 3)
.attr("fill-opacity", .4)
// This function is gonna change the opacity and count of selected and unselected circles
function update(){
// For each check box:
d3.selectAll(".checkbox").each(function(d){
cb = d3.select(this);
grp = cb.property("value")
// If the box is check, I show the group
if(cb.property("checked")){
svg.selectAll("."+grp).transition().duration(1000).style("opacity", 1).attr("r", function(d){ return count(d.count) })
// Otherwise I hide it
}else{
svg.selectAll("."+grp).transition().duration(1000).style("opacity", 0).attr("r", 0)
}
})
}
// When a button change, I run the update function
d3.selectAll(".checkbox").on("change",update);
// And I initialize it at the beginning
update()
})
<!DOCTYPE html>
<meta charset="utf-8">
<!-- Load d3.js, geo projection-->
<script src="https://d3js.org/d3.v4.js"></script>
<script src="https://d3js.org/d3-geo-projection.v2.min.js"></script>
<div>
<input type="checkbox" class="checkbox" value="A" checked><label>2010</label>
<input type="checkbox" class="checkbox" value="B" checked><label>2015</label>
</div>
<svg id="my_dataviz" width="800" height="500"></svg>