javascript - 在 d3.js 中将鼠标悬停在 map 上时生成带有市镇名称的标题

Question

我见过很多使用鼠标悬停功能绘制区域的示例，但就我而言，我无法选择区域。我做错了什么？

d3.json("https://cdn.rawgit.com/finiterank/mapa-colombia-js/9ae3e4e6/colombia-municipios.json", function(error, co) {
      var subunits = topojson.feature(co, co.objects.mpios);
      var projection = d3.geo.mercator()
          .scale(2000)
          .translate([width / 2, height / 2])
          .center([-61,43])
          .rotate([2,3,2]);
      var path = d3.geo.path()
          .projection(projection);
      svg.append("path")
          .datum(subunits)
          .attr("d", path);
      svg.selectAll(".mpio")
          .data(topojson.feature(co, co.objects.mpios).features)
          .enter().append("path")
          .on('mouseover', mouseover)

          .attr("class", function(d) { return "mpio " + "_" + d.id; })
          .attr("d", path)
          //.style("opacity",0);
      svg.append("path")
      .datum(topojson.mesh(co, co.objects.mpios, function(a, b) { return a !== b; }))
      .attr("d", path)
      .attr("class", "mpio-borde")


      svg.append("path")
      .datum(topojson.mesh(co, co.objects.depts, function(a, b) { return true; }))
      .attr("d", path)
      .attr("class", "depto-borde");


      function mouseover(){
          console.log("here")
      }

http://jsfiddle.net/1nchcd78/

Answer 1

您需要确保为目标图层启用了指针事件(特别是如果您没有填充它们)，并且目标图层顶部的 svg 要素未启用鼠标事件:

pointer-events: all / none;

在您的 fiddle 中，您将事件监听器分配给 .mpio 选择:

 svg.selectAll(".mpio")
          .data(topojson.feature(co, co.objects.mpios).features)
          .enter().append("path")
          .on('mouseover', mouseover)

但是，您将指针事件设置为无:

.mpio { pointer-events: none; ... }

这永远不会触发。相反，请将其他要素图层的指针事件设置为 none，并将 .mpio 设置为 all。

现在您的事件监听器将触发。现在您需要做的就是实现一个基本的工具提示。 D3noob has an excellent example here 。我只对其进行了轻微修改，以便在下面的代码片段中使用它:

var width = 900,
    height = 900;
    
var div = d3.select("body").append("div")	
  .attr("class", "tooltip")				
  .style("opacity", 0);

var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height);

d3.json("https://cdn.rawgit.com/finiterank/mapa-colombia-js/9ae3e4e6/colombia-municipios.json", function(error, co) {
      
  var subunits = topojson.feature(co, co.objects.mpios);
  var projection = d3.geo.mercator()
    .scale(2000)
    .translate([width / 2, height / 2])
    .center([-61,43])
    .rotate([2,3,2]);
  
  var path = d3.geo.path()
    .projection(projection);
    
  svg.append("path")
    .datum(subunits)
    .attr("d", path);
    
  svg.selectAll(".mpio")
    .data(topojson.feature(co, co.objects.mpios).features)
    .enter().append("path")
    .on('mouseover', mouseover )
    .on('mouseout',mouseout)
    .attr("class", function(d) { return "mpio " + "_" + d.id; })
    .attr("d", path)
    
  svg.append("path")
    .datum(topojson.mesh(co, co.objects.mpios, function(a, b) { return a !== b; }))
    .attr("d", path)
    .attr("class", "mpio-borde")
    
  svg.append("path")
    .datum(topojson.mesh(co, co.objects.depts, function(a, b) { return true; }))
    .attr("d", path)
    .attr("class", "depto-borde");

})

function mouseover(d){
  d3.select(this).style("fill","orange");
  div.style("opacity", .9)	
     .html(d.properties.name)	
     .style("left", (d3.event.pageX) + "px")		
     .style("top", (d3.event.pageY - 28) + "px");	
}

function mouseout() {
  d3.select(this).style("fill","steelblue");
  div.style("opacity",0);
}

path {
		   fill: #777;
		}

		.mpio {
		  fill: none;
		  stroke: #fff;
		  stroke-opacity: .25;
		  stroke-width: .5px;
		  pointer-events: all;
		}

		.mpio-borde {
		  opacity: 0;
		  fill: none;
		  stroke: #00ff00;
		  stroke-width: 0.5;
      }
		
    .depto-borde {
		  fill: none;
		  stroke: #ff0000;
		  stroke-linejoin: round;
		  stroke-width: 1;
		  opacity: 1;
      }
      
div.tooltip {	
    position: absolute;			
    text-align: center;			
    width: 100px;					
    height: 28px;					
    padding: 2px;	
    font: 12px sans-serif;		
    background: white;	
    border-radius: 8px;			
    pointer-events: none;			
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<script src="https://d3js.org/topojson.v1.min.js"></script>