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; })到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]; })

小提琴示例

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

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;
}

然后你可以这样做：

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

使用求和的示例