如何在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路径但是mouseover和mouseout失败了。

是正确的方法。

如果您不想在路径上使用鼠标事件，请设置css属性 <{1}}在路径上，它不会接受鼠标事件。