D3 - 無法通過css類設置文本顏色

我正在使用d3.js創建一個javascript圖表，並試圖儘可能地將我的樣式與行爲分開。爲此，我嘗試使用.attr（'class'，'...'）方法應用CSS類，而不是使用.style（）方法。大多數情況下，一切正常。但是，當我嘗試應用CSS類來設置某些文本元素的描邊和填充時，它不起作用。讓我感到困惑的部分是，使用.attr（）來應用css類的相同過程對圖的條形圖工作正常，並且我沒有任何問題對文本進行樣式化，如果我使用精確的相同的屬性，而是使用.style（）方法分別設置每個屬性。更奇怪的是，我可以使用.attr（）方法通過css應用一個透明類，沒有任何問題。有什麼我在這裏失蹤？D3 - 無法通過css類設置文本顏色

這是有問題的CSS類：

.black { 
    fill: rgb(41,41,41); 
    stroke: rgb(41,41,41); 
} 

.red { 
    fill: rgb(238,77,77); 
    stroke: rgb(238,77,77); 
    color: rgb(238,77,77); 
} 

.blue { 
    fill: rgb(76,179,230); 
    stroke: rgb(76,179,230); 
} 

.white { 
    fill: rgb(255,255,255); 
    stroke: rgb(255,255,255); 
}

，這是由於某些原因不能正常工作代碼：

var severityText = chart.selectAll(".severity") 
     .data(array) 
     .enter().append("text") 
     .attr("x", function (d, i) { return x(i) + barWidth/2 - (5.0/8)*barNumberSize; }) 
     .attr("y", function (d, i) { return bubbleY(maxBubbleValue - d['severity']) - bubbleRadius/2 - bubbleNumberSize*(1.0/4) }) 
     .style("font-size", bubbleNumberSize.toString() + "px") 
     //this line isn't doing its job 
     .attr('class','white') 
     .attr('class','transparent') 
     .text(function (d, i) { return d['severity'].toString() });

而這個代碼：

var severityText = chart.selectAll(".severity") 
     .data(array) 
     .enter().append("text") 
     .attr("x", function (d, i) { return x(i) + barWidth/2 - (5.0/8)*barNumberSize; }) 
     .attr("y", function (d, i) { return bubbleY(maxBubbleValue - d['severity']) - bubbleRadius/2 - bubbleNumberSize*(1.0/4) }) 
     .style("font-size", bubbleNumberSize.toString() + "px") 
     //works fine when written in this format.....why? 
     .style('fill',white) 
     .style('stroke',white) 
     .attr('class','transparent') 
     .text(function (d, i) { return d['severity'].toString() });

來源

2013-06-12 Ryan Chipman

看起來您在設置後立即用「透明」覆蓋類「白色」。 –

我看到我的錯誤 - 我嘗試通過鏈接應用類，而不是將它們全部列在同一個字符串中。謝謝！如果您想將其作爲解決方案發布，我可以接受它！ –

要設置多個類，請使用包含所有類的單個字符串，而不是鏈接調用，我會覆蓋它。

也就是說，而非

.attr('class','white') 
.attr('class','transparent')

做

.attr('class', 'white transparent')

來源

2013-06-12 15:43:00

這是更好地使用歸

.classed('white', true);

甚至

.classed('white transparent', true);

這節省了大量的書籍，以後再設置/刪除什麼課程。添加數據提供的類名更困難。請參閱ie http://bl.ocks.org/clemens-tolboom/7231676

來源

2013-11-03 16:56:10

實際的API參考是https://github.com/d3/d3-selection/blob/master/README.md#selection_classed – poolie

另一種解釋是在http://jaketrent.com/post/d3-class -operations / – poolie

D3 - 無法通過css類設置文本顏色

回答

相關問題