在D3中雙擊更改節點的顏色

我希望節點的顏色在雙擊時發生變化。即在第一次雙擊時，它會變成黑色，但是在重新雙擊它時，它會變回原來的顏色。我能夠在第一次雙擊時變成黑色，但我無法使其恢復到原來的顏色。在此先感謝，這裏是我的代碼。處理這種在D3中雙擊更改節點的顏色

var gnodes = svg.selectAll('g.gnode') 
       .data(graph.nodes) 
       .enter() 
       .append('g') 
       .classed('gnode', true); 

var node = gnodes.append("circle") 
       .attr("class", "node") 
       .attr("r", 5) 
       .style("fill", function(d) {return d.colr; }) 
       .on('dblclick', function (d) 
       { 
         if (d3.select(this).style("fill") != "black") 
          { 
           d3.select(this).style("fill", "black"); 
          } 
         else 
          { 
           d3.select(this).style("fill", function(d){return d.colr;}); 
          } 
       }) 
       .call(force.drag);

來源

2014-09-25 Learner23

的你在這裏遇到的問題實際上很難找到。

您正在檢查fill樣式是否等於字符串"black"。問題是，許多瀏覽器（包括Chrome和FF）會將顏色名稱重新格式化爲RGB字符串。因此，當您將填充設置爲"black"時，它將轉換爲RGB字符串"rgb(0, 0, 0)"。所以實際上，調用d3.select(this).style("fill")將返回此rgb字符串而不是顏色名稱，確保代碼的else分支永不運行。

通過使用selection.each將每個圓的狀態存儲爲布爾值，然後註冊其雙擊處理程序（可以切換布爾值，然後根據分支進行切換），可以避免必須檢查填充的當前狀態作爲樣式字符串它的價值。試試這個：

var node = gnodes.append("circle") 
    .attr("class", "node") 
    .attr("r", 5) 
    .style("fill", function(d) {return d.colr; }) 
    .each(function() { 
    var sel = d3.select(this); 
    var state = false; 
    sel.on('dblclick', function() { 
     state = !state; 
     if (state) { 
     sel.style('fill', 'black'); 
     } else { 
     sel.style('fill', function(d) { return d.colr; }); 
     } 
    }); 
    });

來源

2014-09-26 03:25:49 jshanley

不適用於我，因爲所有節點都變黑，而不僅僅是雙擊節點。 – Learner23 2014-09-26 03:53:05

啊，'gnodes'是一個輸入選擇不是它。好吧，我更新了答案，使用'selection.each'來做同樣的事情，但是對於每個圈子。 – jshanley 2014-09-26 04:05:35

工程！非常感謝！這是一個很好的方式來做到這一點。 – Learner23 2014-09-26 04:10:51

一種方式是通過CSS：

.doubled { fill: black !important; }

然後在你的DBLCLICK功能切換此CSS類：

d3.selectAll(".node") 
    .on("dblclick", function() { 
    var c = d3.select(this).classed("doubled"); 
    d3.select(this).classed("doubled", !c); 
    })

工作示例這裏：http://jsfiddle.net/qAHC2/829/

來源

2014-09-26 03:19:01 Josh

看起來我犯了一些錯誤，因爲儘管添加了CSS類，但這不起作用。顏色根本不會改變。 – Learner23 2014-09-26 04:13:36

在D3中雙擊更改節點的顏色

回答

相關問題