D3JsDay05Bar拉BarBarBar，作伙来画吧—画个bar chart长条图

用D3绘制长条图

我们现在可以尝试着用已经学到的SVG来画长条图，只不过是透过D3Js的操作来新增SVG元素到html里面。

先宣告一个变数叫做svg并且透过D3Js创建一个SVG元素宽为800高为450来当作画布

此时在svg底下插入一个rect的元素属性依序是x为0 y是0 宽为30高是来自於你所宣告的阵列的索引值为0的那笔资料也就是130
最後填充为绿色

const ary = [130,45,239];
const svg = d3.select("body")
            .append("svg")
            .attr("width",800)
            .attr("height",450);

svg.append("rect")
    .attr("x",0)
    .attr("y",0)
    .attr("width",30)
    .attr("height",ary[0])
    .attr("fill", "green");

此时你所看到的图形应该会长这样

这时候我们试着透过阵列第二笔资料也就是索引值是1的数字45来添加至svg中

let ary = [130,45,239];
let svg = d3.select("body")
            .append("svg")
            .attr("width",800)
            .attr("height",450);

svg.append("rect")
    .attr("x",0)
    .attr("y",0)
    .attr("width",30)
    .attr("height",ary[0])
    .attr("fill", "green");
svg.append("rect")
      .attr("x",34)
      .attr("y",0)
      .attr("width",30)
      .attr("height",ary[1])
      .attr("fill", "green");

由於宽是30多增加4来间隔两个长方形因此我们下一个长方形给定的x值是34，高的部分填入ary[1]也就是45你会发现图形与我们以往看到的长条图好像相反了。
这是因为当填入x与y的时候会根据起始点来生长宽和高的长方形并且对齐上方。

因此我们可以透过一点方式让生长完的长方形都对其在整个画布的下方
将程序码改成以下片段

let ary = [130,45,239];
let svg = d3.select("body")
            .append("svg")
            .attr("width",800)
            .attr("height",450);

svg.append("rect")
    .attr("x",0)
    .attr("y",450-ary[0])
    .attr("width",30)
    .attr("height",ary[0])
    .attr("fill", "green");

svg.append("rect")
.attr("x",34)
.attr("y",450-ary[1])
.attr("width",30)
.attr("height",ary[1])
.attr("fill", "green");

我们将y的起始点透过整个svg画布的高来减掉阵列中的数值，由於生长出来的高与减去的数值是相等，最後就会对齐在svg画布底下了。
参见如下图

另外我们可以添加文字和使用for回圈来制作长条图
程序码如下

let ary = [130,45,239];
let svg = d3.select("body")
            .append("svg")
            .attr("width",800)
            .attr("height",450);
for(let i=0;i<ary.length;i++){
    svg.append("rect")
        .attr("x",34*i)
        .attr("y",450-ary[i])
        .attr("width",30)
        .attr("height",ary[i])
        .attr("fill","green");
    svg.append("text")
    .attr("x",7+34*i)
    .attr("y",450-ary[i]-10)
    .attr("font-size",12)
    .text(ary[i]);
    }

程序码结果如下图

当我们有上千笔资料的时候使用for回圈也不需要一笔一笔输入，另外这里先使用阵列索引值的方式取出资料，後续会提到透过资料绑定的方式。