問題與條形圖的顏色d3.js

Question

我遇到了一些與條形圖的顏色有關的問題。

的jsfiddle在這裏：http://jsfiddle.net/ZCwrx/574/

在111線和112線，我稱之爲barChart功能具有不同的顏色代碼。但在輸出中，兩個條形圖都以第一種顏色顯示。我還發現，如果我取下lines 83 to 86，則圖表可以顯示正確的顏色，但當我將鼠標懸停在條上時，第二個條形圖的顏色會變爲黑色。

任何人都可以幫我修復它嗎？

Answer 1

通過spec,id是在所有元件上都必須是唯一的。您正在爲所有漸變分配相同的ID。快速修復：

var barChart = function(data, chartId, colorOnBar){ 

    if (!this.timesCalled) this.timesCalled = 0; 
    this.timesCalled += 1; 

    ... 

    var gradient = svg.append("svg:defs") 
    .append("svg:linearGradient") 
    .attr("id", "gradient_" + this.timesCalled) 

... 

.style("fill", "url(#gradient_" + this.timesCalled + ")") 

更新fiddle。