D3繪製簡單條形統計圖
效果圖：
（圖中箭頭出表示鼠標位置，交互顯示位置處的矩形）
完整代碼：
<body>
<script src="https://d3js.org/d3.v5.js"></script>
<script>
let w = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
let h = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
w *= 0.98;
h *= 0.9;
let svg = d3.select("body")
.append("svg")
.attr("width", w)
.attr("height", h);
let a = new Array(10);
for (let i = 0; i < 10; ++i)
a[i] = Math.random() * 200;
svg.selectAll("rect")
.data(a)
.enter()
.append("rect")
.attr("x", function (d, i) {
return i * (w / a.length);
})
.attr("y", function (d) {
return h - d;
})
.attr("width", (w / a.length - 10))
.attr("height", function (d) {
return d;
})
.attr("fill", function (d, i) {
return 'rgba(0,' + (200 - d) + ',0,0.8)';
})
.on("mouseover", function (d) {
d3.select(this)
.attr("fill", 'blue');
})
.on("mouseout", function (d) {
d3.select(this)
.attr("fill", 'rgba(0,' + (200 - d) + ',0,0.8)');
});
</script>
</body>
代碼解釋：
rect元素：d3在svg中繪製矩形的元素
.attr() 設置屬性
.attr("x", function (d, i) {
return i * (w / a.length);
})
.attr("y", function (d) {
return h - d;
})
分別設置每個矩形左上點座標(x,y)的x值和y值。
要注意選中的畫布的左上角座標是(0,0)，爲了使矩形畫到畫面的下方，y值不能直接引用d的值。
.attr("width", (w / a.length - 10))
.attr("height", function (d) {
return d;
})
設置每個矩形的寬和長。
.attr("fill", function (d, i) {
return 'rgba(0,' + (200 - d) + ',0,0.8)';
})
填充每個矩形的顏色。
rgba即是 Red + Green + Blue + Alpha。紅色值 + 綠色值 + 藍色值 + 透明度。前三項的值取值範圍是0 ~ 255（十六進制0xFF）。透明度取值0 ~ 1。
注意出現變量時的格式。
.on("mouseover", function (d) {
d3.select(this)
.attr("fill", 'blue');
})
.on("mouseout", function (d) {
d3.select(this)
.attr("fill", 'rgba(0,' + (200 - d) + ',0,0.8)');
})
交互部分，設置該矩形在移入鼠標時的行爲和移出後的行爲。