在X軸上有分類數據的D3多行圖表

Question

我想通過使用由工作日和值組成的公司分支數據繪製多行圖表。

var data = [ 
    { 
     "label": "branch-1", 
     "values": [ 
      { "day": "Monday", "value": 20}, 
      { "day": "Tuesday", "value": 18}, 
      { "day": "Wednesday", "value": 29}, 
      { "day": "Thursday", "value": 31}, 
      { "day": "Friday", "value": 37}, 
      { "day": "Saturday", "value": 25}, 
      { "day": "Sunday", "value": 19} 
     ] 
    }, 
    { 
     "label": "branch-2", 
     "values": [ 
      { "day": "Monday", "value": 32}, 
      { "day": "Tuesday", "value": 29}, 
      { "day": "Wednesday", "value": 37}, 
      { "day": "Thursday", "value": 41}, 
      { "day": "Friday", "value": 31}, 
      { "day": "Saturday", "value": 28}, 
      { "day": "Sunday", "value": 17} 
     ] 
    } 
] 

FIDDLE LINK

首先，我對x-axis具有天的問題。由於「d」屬性在svg路徑上具有Nan值而不是正確的x座標，因此不生成線。我知道我不應該使用minX，maxX for x.domain，但是我找不到要使用的內容。

其次，我用d3.scale.category20()函數來生成顏色。但我想知道，如果有超過20個分支，我是否可以使用超過20種顏色。是否可以使用CSS？

在此先感謝。

Answer 1

序數標度需要明確地設置其域，也就是說，序號域沒有「min」或「max」的概念。你必須做類似

x.domain(data[0].values.map(function (d) { return d.day; })); 

完整的演示here。至於顏色，你可以在CSS或D3代碼中設置任何你想要的。