javascript - d3如何制作单个堆积柱形图

Question

我正在尝试让 d3 绘制单个堆叠条形图，如下所示:

<svg width = '500' height= '100'>
<rect x='0' y='0' width='224' height='30' fill='green'/>
<rect x='224' y='0' width='84' height='30' fill='blue'/>
<rect x='308' y='0' width='29' height='30' fill='darkgray'/>
<rect x='337' y='0' width='3' height='30' fill='#606060'/>
</svg>

如您所见，x 位置从零开始，然后每个后续 x 位置等于前面宽度的总和。

所以我试图让 d3 从一个名为 datavars 的数组中绘制类似的东西:

var datavars = [224, 84, 29, 3];

...并确保 d3 将正确的宽度值分配给正确的 x 值，我创建了这些变量:

var prev_width0 = 0;
var prev_width1 = datavars[0];
var prev_width2 =  datavars[0] +  datavars[1];
var prev_width3 =  datavars[0] +  datavars[1] +  datavars[2];

... 并像这样定义 x 值:

//create SVG element
var svg = d3.select('body')
.append('svg')
.attr('width', w)
.attr('height', h);

svg.selectAll('rect')
.data(datavars)
.enter()
.append('rect')
.attr('width', function(d){
    return d;})
               .attr('x',function(d, i){
               return 'prev_width'+i; })
.attr('y',0)
.attr('height', 30);

您可能已经猜到，强缩进函数(基于前面宽度的总和，并在 prev_width 变量中定义)为每次迭代(prev_width0、prev_width1 等)返回一个字符串.) 并且不是我认为我在创建 prev_width 变量时定义的值。

我显然错误地定义了变量。知道我该如何正确地做到这一点吗？

Answer 1

JavaScript 不会将字符串 "datavars1" 解释为变量 datavars1。要将字符串解释为 JavaScript 变量，您可以使用 eval()。所以改变: return 'prev_width'+i; }) to return eval('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]; })

Fiddle Example

你可以用颜色做类似的事情:

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

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

Bar chart with color

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

---

一个更具可扩展性的想法是摆脱数组 prev_width 并拥有一个可以将总和计算到一个点的函数。如:

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

然后你可以这样做:

...
   .attr('x',function(d, i){
   return sum(datavars, 0, i); })

Example using summation