Question

在数据连接中...我有类似下面的内容，它根据mouseover事件更改不透明度。当前多边形的不透明度已更改。

.enter().append("path")
.on("mouseover", function(d) {
    d3.select(this).style("opacity", 1);
};

但是我想改变这种行为....所以所有其他多边形（即NOT（this））的颜色都改变了。当前多边形保持其当前颜色，其他多边形的不透明度将更改。

在美国的背景下......如果用户在加利福尼亚上空盘旋，那么剩下的49个州的颜色会改变颜色。

由于

Answer 1

您可能希望保存选择并在.on事件中使用它：

var allPolygon = svg.selectAll('.findme')
    .data(dat)
    .enter()
    .append("path")
    .attr('class', 'findme')
    .on("mouseover", function(d) {
        allPolygon.style("opacity", 1);
    };

sample illustration

Answer 2

您可以使用D3＆＃39; .filter()过滤选区中的元素并相应地设置属性：

d3.selectAll("path").filter(function(e) { return e != d; }).style("opacity", 1);

这将选择除当前值之外的所有path并将其不透明度设置为1.

D3更改地图多边形的颜色（鼠标悬停）

2 个答案: