在d3鼠標懸停變暗rect/circle

我正在使用d3繪製幾個矩形和圓形填充到某些顏色。在d3鼠標懸停變暗rect/circle

現在，當鼠標指針懸停在他們身上時，我的物體會變暗。我的想法是通過把一個黑色的背景阿爾法對於g標籤包圍每個對象使用CSS：

g:hover { 
    background-color: rgba(0, 0, 0, .5); 
}

但是，這並不工作。當我把opacity: .5放在那裏時它確實有效，但我希望它更暗，而不是更輕。有沒有人有一些提示？謝謝！

來源

2013-11-15 quape

你能發佈所有代碼嗎？或做一個小提琴？ – DaniP

:hover一般情況下工作，但它是在g標記上應用它的錯誤方法，該標記是矩形的父項，而不是覆蓋子項。

我現在通過將mouseover事件添加到rect標記，讀出fill屬性的顏色值並計算出較暗的值（如果它），現在解決了整個問題。可能不是最好的解決方案，但我沒有其他想法，它的工作原理。

.on("mouseover", function() { 
    if((r = $(this).css("fill").match(/(\d+),\s*(\d+),\s*(\d+)/i))) { 
     for(var i = 1; i < 4; i++) { 
      r[i] = Math.round(r[i] * .5); 
     } 
     $(this).attr("fill-old", $(this).css("fill")); 
     $(this).css("fill", 'rgb('+r[1]+','+r[2]+','+r[3]+')'); 
    } 
}) 
.on("mouseout", function() { 
    if($(this).attr("fill-old")) $(this).css("fill", $(this).attr("fill-old")); 
});

來源

2013-11-20 14:03:34 quape

我不認爲你可以可靠地在SVG元素上使用懸停僞。而是使用d3在鼠標懸停上添加一個類，並在鼠標懸停時將其刪除。

例如：

svg.append("g") 
    .on("mouseover", function() { 
     d3.select(this).classed("hover", true); 
     }) 
    .on("mouseout", function() { 
     d3.select(this).classed("hover", false); 
    })

然後在CSS

g.hover { 
    background-color: rgba(0, 0, 0, .5); 
}

希望有所幫助。

編輯：也許你可以使用：懸停。看到這個問題並回答https://stackoverflow.com/a/9210392/2594702。

基本上它說使用fill: rgba(0, 0, 0, .5)而不是background-color。

我確定我記得當我學習D3時使用mouseover和mouseout。也許瀏覽器支持不如現在。

來源

2013-11-15 13:59:00 Samih

是的，'：hover'一般可以工作，但在'background-color'和'fill'上都沒有'rgba（）'。 – quape

對於D3 vers。 4 在我的甜甜圈圖上，我面臨同樣的問題。我找到了mboostocks解決方案，可以找到here。我拿了他的第二個例子，用「更黑」代替「更亮」。我的結果代碼：

.on("mouseover", function(d){ 
    d3.select(this).style("fill", function() { 
     return d3.rgb(d3.select(this).style("fill")).darker(0.2); 
    }); 
});

來源

2017-04-12 14:08:34 Alexander

在d3鼠標懸停變暗rect/circle

回答

相關問題