從csv加載數據，但代表它不同D3 - 水平堆積條形

Question

我試圖實現某些內容，但我不確定如何處理它。

我有一個樣本數據data.csv文件，像這樣：

State,p1,p2,p3,p4,p5,p6,p7 
AL,0.5,0.5,0.5,1,1,1,1,1,1 
AK,1,1,1,1,1,1,1,1,1 

現在，每個數據值是100。這看起來不錯，但如果我改變的值，我的柱狀圖的變化，它需要固定（x軸應始終爲0-7），因爲它表示在這種情況下一週的數據。

我不希望我的圖表依賴於數據的原因是因爲數據僅用於顏色表示，而不用於寬度。所以，如果數值從80-100變爲綠色。但我會在稍後解決它。

我在Highcharts中取得了理想的結果，但我更喜歡D3。

我沒有在這裏使用Highcharts，我想是這樣的：http://jsfiddle.net/21udsf05/3/

後，我讀this answe R，我實現了相同的代碼，我的情況：從@mbostock http://plnkr.co/edit/SgrHixnqnLHcra3Tv65H?p=preview。

我感謝任何幫助！

Answer 1

這裏是我的解決方案：

首先，因爲最重要的事情在這裏根據價值着色酒吧，使用閾值規模：

var color = d3.scale.threshold() 
    .domain([0.25, 0.75]) 
    .range(['green', 'yellow', 'red']); 

在這個例子中，如果該值小於0.25，酒吧是綠色的，在0.25和0.75之間，酒吧是黃色的，並且0.75以上酒吧是紅色的。無論如何，這只是一個讓你明白的例子，以你想要的方式改變域名和範圍。

之後，把價值在ages陣列：

data.forEach(function(d) { 
    var y0 = 0; 
    d.ages = agesDomain.map(function(name) { 
     return { 
      name: name, 
      value: d[name], 
      y0: y0, 
      y1: y0 += +d[name] 
     }; 
    }); 
    d.total = d.ages[d.ages.length - 1].y1; 
}); 

最後，設置所有的酒吧，以相同的寬度，並通過價值將它們上色：

state.selectAll("rect") 
    .data(function(d) { 
     return d.ages; 
    }) 
    .enter().append("rect") 
    .attr("height", y.rangeBand()) 
    .attr("x", function(d, i) { 
     return x(i); 
    }) 
    .attr("width", x(1)) 
    .style("fill", function(d) { 
     return color(d.value); 
    }); 

這裏是你的爲了使圖表更加多樣化，我改變了數據：http://plnkr.co/edit/fFwTn9m4MedOL06HxbK8?p=preview