Javascript d3如何制作单叠柱状图

我试着让d3画一个单一的堆叠条形图，如下所示：

---

JavaScript不会将字符串

“datavars1”

解释为变量

datavars1

。要将字符串解释为JavaScript变量，可以使用

eval（）

。所以改变：

返回'prev_width'+i；}）到
返回值（'prev_width'+i）；}）。虽然更好的方法可能是使用数组，例如：

var prev_width = [0,
                  datavars[0],
                  datavars[0] +  datavars[1],
                  datavars[0] +  datavars[1] +  datavars[2]
                 ];

...
   .attr('x',function(d, i){
   return prev_width[i]; })


您可以对颜色执行类似的操作：

var colors = ['green','blue','darkgray','#606060'];

...
.attr('fill', function(d, i){ return colors[i]; })


还可以创建单个对象数组来存储颜色、宽度等


一个更具可扩展性的想法是去掉数组
prev_width
，并使用一个函数将总和计算到一个点。例如：

function sum(array, start, end) {
    var total = 0;
    for(var i=start; i<end; i++) total += array[i];
    return total;
}

这里是一个片段（我的处理方式有点不同）


//此函数用于配对查找数组中每个宽度的x，并将它们添加到名为x_和_width_值的新数组中
//示例：[[0224]、[84224]、[29308]、[3337]]
//           ^  ^    ^   ^    ^   ^    ^  ^
//x宽x宽。。。。。。。。。。。。。
功能组合（上一个、当前、索引、arr）{
//该方法侧重于通过参考先前和当前元素来累积结果
//对于第一个和第二个元素，我们需要特别添加
如果（索引==1）{
x_和_width_值。push（[arr[index-1]，0]）；
x_和宽度_值。推送（[arr[index]，prev]）
}
//我们使用索引的其他元素如下：；
否则{
x_和宽度_值。推送（[arr[index]，prev]）
}
返回上一个+当前
}
//在创建了一个具有所有[x，width]组合的数组之后，我们将其映射到颜色以得到最终的数组
//示例：[[0224]，“绿色”]，[[84224]，“蓝色”]，[29308]，[3337]，“黑色”]
功能颜色\u与\u组合（e，i）{
返回[x_和_宽度_值[i]，颜色[i]；
}
//*******************acutal代码***************
var x_和_width_值=[]；
//创建svg元素时需要此链接
变量链接=”http://www.w3.org/2000/svg"
//你所有的宽度
var all_widths=[224,84,29,3]；
//你所有的颜色
var colors=[“绿色”、“蓝色”、“暗灰色”、“#606060]”；
//将宽度数组排序为安全的
所有宽度.sort（函数（a，b）{返回b-a}）；
//查找所有宽度和x的组合
所有宽度减少（组合）；
//将宽度和x值映射到颜色值
var all=x_和_宽度_值.map（颜色_与_组合）；
//为对象创建一个循环
对于（var i=0；iah）…这些非常好，非常感谢。您的第一个建议是我一直在努力的方向，接下来的几个建议非常优雅。非常感谢
...
   .attr('x',function(d, i){
   return sum(datavars, 0, i); })