【D3.js數據可視化系列教程】--（十）更自由的條形圖

時間 2019-11-12

原文原文鏈接

1. 準備數據

繪製條形圖的輸入數只須要一個表示每一個條數據量的數組就行。javascript

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

2. 建立SVG元素

var w = 500;
var h = 100;

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

3. 繪製矩形條

這裏會使用D3經典的select-data-enter-append-attr/style的編程套路。
也就是選擇元素-綁定數據-添加新元素的佔位符-添加元素-設置屬性或樣式。
這一組操做符是D3最經常使用的，你們必定要熟記之後幾乎每一個圖都會用。這套路之後會單獨介紹，這裏只進行簡要的註釋。

svg.selectAll("rect") // 選擇一組數據，這個時候尚未元素
.data(dataset) // 加載數據集
.enter() // 給新增數據添加佔位符，表示將要添加一個元素
.append("rect") //添加矩形元素
// 這裏屬性的設置後面單說

4. 矩形條的屬性和樣式

咱們繪製的思路是：css

條寬

條寬 = 條實際寬度 + 間隙的寬度。html

其中條寬 = (w / dataset.length）java

間隙的寬度 = barPaddingspring

條高

條高 = 條長-縱座標（縱座標是從上到下計算，即下方向爲正）即條高 = h - (d * 4)編程

條的顏色

條的顏色用據數據集生成的動態RGB值填充。數組

因此結合上面分析結果就是：app

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

這裏司機多說一句：

.attr("x", function(d, i) {
  return i * (w / dataset.length) + (w / dataset.length - barPadding) / 2;
})

不少初學者看不懂這裏的.attr("x", function(d, i)，其實看前面的文章你們應該知道，x屬性表明矩形的起點位置。這個匿名函數的入參兩個d和i，分別表明當前元素綁定的數據值，當前元素的索引（第幾個元素）。d和i的名字能夠換成其餘單詞。svg

5. 文本標記（但是數值）

同理，添加文本並指定文本的XY座標，其中：函數

x座標：i * (w / dataset.length) + (w / dataset.length - barPadding) / 2; y座標：h - (d * 4) + 14;

svg.selectAll("text")
.data(dataset)
.enter()
.append("text")
.text(function(d) {
return d;
})
.attr("text-anchor", "middle")
.attr("x", function(d, i) {
return i * (w / dataset.length) + (w / dataset.length - barPadding) / 2;
})
.attr("y", function(d) {
return h - (d * 4) + 14;
})
.attr("font-family", "sans-serif")
.attr("font-size", "11px")
.attr("fill", "white");

6. 源碼

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>testD3-8-drawBar.html</title>

<script type="text/javascript" src="http://localhost:8080/spring/js/d3.v3.js"></script>

<style type="text/css">

</style>

</head>

<body>

<script type="text/javascript">

//SVG高寬

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", function(d) {

return h - (d * 4);

})

.attr("width", w / dataset.length - barPadding)

.attr("height", function(d) {

return d * 4;

})

.attr("fill", function(d) {

return "rgb(0, 0, " + (d * 10) + ")";

});


svg.selectAll("text")

.data(dataset)

.enter()

.append("text")

.text(function(d) {

return d;

})

.attr("text-anchor", "middle")

.attr("x", function(d, i) {

return i * (w / dataset.length) + (w / dataset.length - barPadding) / 2;

})

.attr("y", function(d) {

return h - (d * 4) + 14;

})

.attr("font-family", "sans-serif")

.attr("font-size", "11px")

.attr("fill", "white");

</script>


</body>

</html>