时间戳

首页 > 解决方案 > 气泡图 d3 上重叠圆圈的工具提示

javascript - 气泡图 d3 上重叠圆圈的工具提示

问题描述

问题：如何将简单的 var 工具提示（悬停）添加到 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>

标签： javascriptd3.jstooltipmouseover

解决方案

推荐阅读