如何給d3地圖着色不同的邊界

Question

我有一個D3.js地圖。我想分割3個區域並添加不同的顏色邊框。我試圖在地圖上添加svg路徑，但mouseover和mouseout失敗。我能做什麼？

該圖像是我期望的。

d3.json("map/country.json", function(error, map) { 
    deleteMap(); 
    if (error) return console.error(error); 
    projection = d3.geo.mercator().center([121,23,5]).scale(40000).translate([mapX,mapY]); 
    path = d3.geo.path().projection(
     projection 
     ); 
    features = topojson.feature(map, map.objects.country).features; 
    d3.select("#svg").selectAll("path").data(features).enter().append("path").attr("d",path) 
    .attr("fill",colorDefault).attr("class","area") 
    .on({ 
     "mouseover": function(d){ 
      d3.select(this).classed("active", true); 
      var x = d3.mouse(this)[0]; 
      var y = d3.mouse(this)[1]; 
      mouseInInformation(x,y,d.properties.C_Name) 
     }, 
     "mouseout": function(){ 
      d3.select(this).classed("active", false); 
      var x = d3.mouse(this)[0]; 
      var y = d3.mouse(this)[1]; 
      mouseOutInformation(x,y); 
     }, 

    }).call(zoom); 

Answer 1

您所採取的方法：

我試圖在地圖上，但鼠標懸停及移出時是無法添加SVG路徑。

是正確的做法。

如果你不想在路徑上的鼠標事件，然後設置路徑上的css屬性 pointer-events: none;，它不會採取鼠標事件。