d3之简单柱状图

柱状图其实是很简单，就是矩形和线的组合，在这里为操作方便我们一般会添加g组。g标签没有任何别的作用，只是把它的所有children聚到一起而已。下面是800宽，600高的svg上添加了一个柱图的g组。

效果图：

p1.png

代码如下，需要注意的是，g组的transform不会影响坐标的改变。
还有y需要特别注意下，跟数学上的y从下到上不一样，svg的0点在最上方。

<script>
        var dataset=[100,50,80,200];

        var _svg = d3.select("body")
                .append("svg")
                .attr("width","800")
                .attr("height","600")
                .style("background","lightgrey");

        var _g=_svg.append("g");//添加g组

        _g.attr("transform","translate(50,120)");
        
        var barWidth = 20, barPadding = 30;
        var x2 = barPadding * ( dataset.length + 1 ) + barWidth * dataset.length;

        _g.append("line")
                .attr("x1",0)
                .attr("y1","180")
                .attr("x2",x2)
                .attr("y2","180")
                .attr("stroke","steelblue");
        
        _g.selectAll("rect")
                .data(dataset)
                .enter()
                .append("rect")
                .attr("x",function(d,i){
                    //20为柱子宽度，30为柱子之间的间距
                    return barPadding + barWidth * i + barPadding * i;
                })
                .attr("y",function(d,i){
                    //d为柱子的高度，180为x轴的y值 
                    return 180 - d;
                })
                .attr("height",function(d){return d})
                .attr("width","20")
                .style("fill","steelblue");

        _g.selectAll("text")
                .data(dataset)
                .enter()
                .append("text")
                .attr("x",function(d,i){
                    return 30+20*i+30*i;
                })
                .attr("y",function(d){
                    return 160-d;
                })
                .text(function(d){return d})
                .attr("text-anchor","middle")
                .attr("fill","darkblue");
    </script>

这里用的是数组里的真实的数据作为坐标算的，如果数据特别大的话就得用到比例尺了~