从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