<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script>
var width = 600;
var height = 600;
var svg = d3.select("body").append("svg")
.attr("width",width)
.attr("height",height);
var dataset = [ 30 , 20 , 45 , 12 , 21 ];
var wx = d3.scale.linear
<span style="white-space:pre"> </span>.domain([0,d3.max(dataset)])
<span style="white-space:pre"> </span>.range([0,500]);
svg.selectAll("rect")
.data(dataset)
.enter()
.append("rect")
.attr("x",10)
.attr("y",function(d,i){
return i * 30;
})
.attr("width",wx)
.attr("height",28)
.attr("fill","red");
</script>
enter 表示当所需要的元素(这里为 rect )比绑定的数据集合的元素(这里为 dataset )少时,自动添加位置,使得与数据集合的数量一样多。