D3不更改地圖多邊形的顏色（鼠標懸停）

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

樣本圖

Answer 2

您可以使用D3的.filter()來過濾選擇中的元素並相應地設置屬性：

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

這將選擇除當前path以外的所有path ，並將其不透明度設置為1。