D3.js 更自由的條形圖

1、添加一個矩形

//Width and height
var w = 500;
var h = 100;

var dataset = [ 5, 10, 13, 19, 21, 25, 22, 18, 15, 13,11, 12, 15, 20, 18, 17, 16, 18, 23, 25 ];

//建立SVG元素
var svg = d3.select("body")
    .append("svg")
    .attr("width", w)
    .attr("height", h);

svg.selectAll("rect")
    .data(dataset)
    .enter()
    .append("rect")
    .attr("x", 0)
    .attr("y", 0)
    .attr("width", 20)
    .attr("height", 100);

 

 

 

2、添加多條矩形

//Width and height
var w = 500;
var h = 100;

var dataset = [ 5, 10, 13, 19, 21, 25, 22, 18, 15, 13,11, 12, 15, 20, 18, 17, 16, 18, 23, 25 ];


//建立SVG元素
var svg = d3.select("body")
    .append("svg")
    .attr("width", w)
    .attr("height", h);

svg.selectAll("rect")
    .data(dataset)
    .enter()
    .append("rect")
    .attr("x", function(d, i) {
        return i * 21; //Bar width of 20 plus 1 for padding
    })
    .attr("y", 0)
    .attr("width", 20)
    .attr("height", 100);

 

 

 

 

3、均勻的添加條-定條寬

　　除的方式(i * (w / dataset.length);)做爲條和間隙的總寬度，在設置固定寬度小於總寬度，這時就會天然生成一個空白間隙

　　一句話：條的寬度固定，總寬-條寬=空白寬。空白寬取決於總寬，總寬取決於計算表達式(w / dataset.length）

//Width and height
var w = 500;
var h = 100;
var barPadding = 1;


var dataset = [ 5, 10, 13, 19, 21, 25, 22, 18, 15, 13,11, 12, 15, 20, 18, 17, 16, 18, 23, 25 ];


//建立SVG元素
var svg = d3.select("body")
    .append("svg")
    .attr("width", w)
    .attr("height", h);


svg.selectAll("rect")
    .data(dataset)
    .enter()
    .append("rect")
    .attr("x", function(d, i) {
        return i * (w / dataset.length);
    })
    .attr("y", 0)
    .attr("width", 20)
    .attr("height", 100);

 

 

 

 4、均勻的添加條-定間隙寬

　　一句話：間隙的寬度固定，總寬-空白寬=條寬。條寬取決於總寬（w / dataset.length - barPadding），總寬取決於計算表達式(w / dataset.length）

//Width and height
var w = 500;
var h = 100;
var barPadding = 1;

var dataset = [ 5, 10, 13, 19, 21, 25, 22, 18, 15, 13,11, 12, 15, 20, 18, 17, 16, 18, 23, 25 ];

//Create SVG element
var svg = d3.select("body")
    .append("svg")
    .attr("width", w)
    .attr("height", h);

svg.selectAll("rect")
    .data(dataset)
    .enter()
    .append("rect")
    .attr("x", function(d, i) {
        return i * (w / dataset.length);
    })
    .attr("y", 0)
    .attr("width", w / dataset.length - barPadding)
    .attr("height", 100);