使用D3轉換禁用懸停CSS上的SVG

我有一些圈子，當我把鼠標懸停在它們上面時，我想改變填充。我給他們的「腳」類，這裏是他們的CSS：使用D3轉換禁用懸停CSS上的SVG

.pin { 
    fill: #9ecae1; 
    stroke:#3182bd; 

} 
.pin:hover{ 
    fill:steelblue; 
}

每個引腳具有價值，我想包括一些過渡，這樣如果在該值的變化，圓圈會短暫閃爍一些其他顏色，例如綠色。他們工作正常，沒有更新。更新後，懸停不再起作用。

這裏是我的代碼轉換： d [2]只是一些關鍵的名字。

svg.selectAll("circle").data(points, function(d) {return d[2];}) 
    .transition() 
    .duration(500) 
    .style("fill", "green") 
    .attr("r", function(d) {return 5 + 10*Math.ceil(radius(d[3]));}) 
    .each("end", function(d){ 
    d3.select(this).transition() 
     .style("fill", "#9ecae1"); 
    });

我能夠確定設置樣式（「填充」，xxx）禁用懸停，但爲什麼？是否有辦法在保持懸停的同時獲得瞬間過渡？

來源

2014-06-18 user2687617

你能制定一個小提琴，然後我們會做這個事情... –

做一個「簡化」版本，我做了這個小提琴：http://jsfiddle.net/5PHSc/基於http://chimera.labs.oreilly.com/books/1230000000345/ch10.html#_click_to_sort。所以，當你點擊酒吧，應該有一個過渡，使酒吧移動和變成紅色。但是，懸停屬性丟失。 – user2687617

我明白這個問題，那就是在下面的代碼

svg.selectAll("circle").data(points, function(d) {return d[2];}) 
    .transition() 
    .duration(500) 
    .style("fill", "green") 
    .attr("r", function(d) {return 5 + 10*Math.ceil(radius(d[3]));}) 
    .each("end", function(d){ 
    d3.select(this).transition() 
     .style("fill", "#9ecae1"); 
    });

我們使用內嵌式的應用色彩，這直列比外部CSS更優先，所以不要使用應用的顏色內嵌式的，而不是使用屬性（填充），以填補顏色，我們要改變的是刪除.style("fill", "green")與attr("fill", "green") 和.style("fill", "#9ecae1")與.attr("fill", "#9ecae1") 下面替換它的代碼行是修改後的代碼

svg.selectAll("circle").data(points, function(d) {return d[2];}) 
    .transition() 
    .duration(500) 
    .attr("fill", "green") 
    .attr("r", function(d) {return 5 + 10*Math.ceil(radius(d[3]));}) 
    .each("end", function(d){ 
    d3.select(this).transition() 
     .attr("fill", "#9ecae1"); 
    });

來源

2014-06-19 06:53:39

使用D3轉換禁用懸停CSS上的SVG

回答

相關問題