D3.js類別顏色標尺工作不正常

Question

所以我有一個視圖創建路徑，我試圖讓它使我繪製的每一行都具有隨機顏色。

目前，我正在做這個 -

  var color = d3.scale.category20(); 


       //other code that does stuff 
     this.path = svg.append("path") 
      .attr("d", line(newData)) 
      .style("stroke", function(d,i) { 
       var colorIndex = Math.random() * (20 - 0) + 0; 
       return color(colorIndex); }) 
      .attr("fill","none") 
      .attr("class","line"); 

這並不繪製不同顏色的線。此外，當我這樣做

 this.path = svg.append("path") 
      .attr("d", line(newData)) 
      .style("stroke", function(d,i) { 
       return color(4); }) 
      .attr("fill","none") 
      .attr("class","line"); 

顏色仍然是藍色。

這是爲什麼發生？

Answer 1

這是發生，因爲沒有設置域 -

d3.scale.category10() not behaving as expected

有答案

Answer 2

我已經設置了一個最小的小提琴告訴你正確的方法來設置線功能。我還將顏色方案更改爲類別（10）以顯示更多對比色（您仍然可以使用類別20，但看到顏色有所不同）。這裏是FIDDLE。

var lineFunction = d3.svg.line() 
     .x(function (d) { 
     return d.x; 
    }) 
     .y(function (d) { 
     return d.y; 
    }) 
    .interpolate("linear");