javascript - 在D3中，如何为当前特定路径启用鼠标悬停事件？

我正在使用d3.js创建世界地图。在该地图中，我需要为每个国家/地区绑定mouseover事件。

例如：如果我mouseover印度，我只需要更改印度的Fill（Background）颜色。

我实现了mouseover事件，但是我的问题是，当我在整个国家/地区（印度）上执行mouseover影响所有国家/地区时，我的意思是填充颜色会影响所有国家/地区，但仅需要影响当前国家/地区。

我也尝试使用this，但是对我来说没有运气。

.on("mouseover", function(){d3.select(this).style("fill", "aliceblue");})

请帮助任何人解决我的问题。

我的完整代码

     var width = 1000,
        height = 500;

    var projection = d3.geo.robinson()
        .scale(150)
    //.translate(100,100)
    .precision(.5);

    var path = d3.geo.path()
    //  .attr("class","path")
        .projection(projection);

    var svg = d3.select('#'+id)
        .append('svg')
        .attr("width", width)
        .attr("height", height)
        .attr("style", "background:" + json.bc);


    //shape
    d3.json("world.json", function(error, world) {

         svg
            .datum(topojson.feature(world, world.objects.countries))
            .append("path")
            .on("mouseover", function(){d3.select(this).style("fill", "red");})
            .on("mouseout", function(){d3.select(this).style("fill", "white");})
            .attr("style", "fill:" + json.cbc)
            .attr("class", "country")
            .attr("d", path)

            ;
    });

鼠标悬停之前



在MouseOver之后

最佳答案

这段代码：

 svg
  .datum(topojson.feature(world, world.objects.countries))
  .append("path")
...

说->我有一条数据，从中画了一条路。

更改为此：

svg.selectAll(".countries")
  .data(topojson.feature(world, world.objects.countries).features)
  .enter()
  .append("path")
  ...

它说->我有多个数据（功能），将数据绑定到我的选择（selectAll），并为我画出每个组件的路径。

示例here。

关于javascript - 在D3中，如何为当前特定路径启用鼠标悬停事件？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/28199330/