我试图让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() …