條形圖d3.js的顏色問題

Question

我在條形圖的顏色方面遇到一些麻煩。

Jsfiddle在這里： http : //jsfiddle.net/ZCwrx/574/

在第111行和第112行中，我使用不同的顏色代碼調用barChart函數。 但是在輸出中，兩個條形圖都以第一種顏色顯示。 我還發現，如果我從lines 83 to 86斷開，圖表可以顯示正確的顏色，但是當我將鼠標懸停在條形圖上時，第二個條形圖的顏色將變為黑色。

誰能幫我解決這個問題？

Answer 1

根據規范 ， 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 + ")")

更新小提琴 。