Question

我看过很多用鼠标悬停功能绘制区域的例子，但在我的情况下，我无法选择一个区域。我做错了什么？

public void growboxCellBehaviour(VBox plantAreaVbox) {  
    plantAreaVbox.setOnMouseClicked(new EventHandler<MouseEvent>() {
        public void handle(MouseEvent me) {
            System.out.println("NAME: " + plant.getName() + ", gridId: " + plant.getGridId());
        }
    });
}

http://jsfiddle.net/1nchcd78/

Answer 1

您需要确保为目标图层启用了指针事件（特别是如果您没有填充它们），并且目标图层顶部的svg功能没有启用鼠标事件：

pointer-events: all / none;

在你的小提琴中，你将事件监听器分配给.mpio选择：

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

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

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

这绝不会触发。而是将其他要素图层的指针事件设置为无，并将其设置为.mpio的全部。

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

＆＃13;

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);
}

＆＃13;

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;			
}

＆＃13;

<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>

＆＃13;

使用鼠标悬停在d3.js的地图上生成具有市政名称的标题

1 个答案: