D3.js繪製柱形圖
阿新 • • 發佈：2019-01-02
注意：此次繪製的柱形圖不涉及座標。
步驟：
一.新增矩形。
<script type="text/javascript"> var datest = [30,78,90,210,105,98,150,177]; //繪製柱形圖所用的資料 var width = 400; //svg繪圖區域的寬度 var height = 400; //svg繪圖區域的高度 var svg = d3.select('body') //選擇<tbody> .append('svg') //在<tbody>中新增<svg> .attr('width', width) //設定<svg>的寬度屬性 .attr('height', height) //設定<svg>的高度屬性 var padding = {top: 20, right: 20, bottom: 20, left: 20}; //定義上下左右的內邊距 //矩形所佔的寬度（包括空白） var rectStep = 35; //矩形所佔的寬度（不包括空白） var rectWidth = 30; //繪製矩形 var rect = svg.selectAll('rect') .data(datest) //繫結資料 .enter() .append('rect') //新增rect元素，使他的數量和陣列長度一致 .attr('fill', 'steelblue') //設定顏色為steelblue .attr('x', function(d,i) { return padding.left + i * rectStep; //設定矩形的x座標 }) .attr('y', function(d) { return height - padding.bottom - d; //設定矩形的y座標 }) .attr('width', rectWidth) //設定矩形的寬度 .attr('height', function(d) { return d; //設定矩形的高度 }); </script>
效果圖：
二.新增文字。
//新增文字部分 var text = svg.selectAll('text') .data(datest) .enter() .append('text') .attr('fill', 'white') .attr('font-size', '14px') .attr('text-anchor', 'middle') .attr('x', function(d,i) { return padding.left + i * rectStep; }) .attr('y', function(d) { return height - padding.bottom - d; }) .attr('dx', rectWidth / 2) //dx是相對於x平移的大小 .attr('dy', '1em') //dy是相對於y平移的大小 .text(function(d) { return d; })
效果圖：
三.更新資料。
//更新資料 function draw() { //獲取矩形的update部分 var updateRect = svg.selectAll('rect') .data(datest); //獲取矩形的enter部分 var enterRect = updateRect.enter(); //獲取矩形的exit部分 var exitRect = updateRect.exit(); //1.矩形的update部分的處理方法 updateRect.attr('fill', 'steelblue') //設定顏色為steelblue .attr('x', function(d,i) { //設定矩形的x座標 return padding.left + i * rectStep; }) .attr('y', function(d) { //設定矩形的y座標 return height - padding.bottom - d; }) .attr('width', rectWidth) //設定矩形的寬度 .attr('height', function(d) { //設定矩形的高度 return d; }); //2.矩形的enter部分處理辦法 enterRect.append('rect') .attr('fill', 'steelblue') //設定矩形的顏色 .attr('x', function(d,i) { //設定矩形的x座標 return padding.left + i * rectStep; }) .attr('y', function(d) { //設定巨型的y座標 return height - padding.bottom - d; }) .attr('width', rectWidth) //設定矩形的寬度 .attr('height', function(d) { //設定矩形的高度 return d; }); //3.矩形的exit處理方法 exitRect.remove(); //獲取文字的update部分 var updateText = svg.selectAll('text') .data(datest); //獲取文字的enter部分 var enterText = updateText.enter(); //獲取文字的exit部分 var exitText = updateText.exit(); //1.文字的update部分的處理方法 updateText.attr('fill', 'white') .attr('font-size', '14px') .attr('text-anchor', 'middle') .attr('x', function(d,i) { return padding.left + i * rectStep; }) .attr('y', function(d) { return height - padding.bottom - d; }) .attr('dx', rectWidth / 2) //dx是相對於x平移的大小 .attr('dy', '1em') //dy是相對於y平移的大小 .text(function(d) { return d; }); //2.文字的enter部分的處理方法 enterText.append('text') .attr('fill', 'white') .attr('font-size', '14px') .attr('text-anchor', 'middle') .attr('x', function(d,i) { return padding.left + i * rectStep; }) .attr('y', function(d) { return height - padding.bottom - d; }) .attr('dx', rectWidth / 2) //dx是相對於x平移的大小 .attr('dy', '1em') //dy是相對於y平移的大小 .text(function(d) { return d; }); //3.文字的exit處理辦法 exitText.remove(); } //排序函式 function mySort() { datest.sort(d3.ascending); draw(); } //增加一個項函式 function myAdd() { datest.push(Math.floor(Math.random() * 100)); draw(); } </script> <div class="box"> <button type="button" onclick="mySort()">排序</button> <button type="button" onclick="myAdd()">增加資料</button> </div> </body>
效果圖：
全部程式碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.box {
width: 300px;
display: flex;
flex-direction: row;
justify-content: space-around;
margin-bottom: 50px;
}
</style>
<script src="https://cdn.bootcss.com/d3/3.2.1/d3.js"></script>
</head>
<body>
<script type="text/javascript">
var datest = [30,78,90,210,105,98,150,177]; //繪製柱形圖所用的資料
var width = 500; //svg繪圖區域的寬度
var height = 500; //svg繪圖區域的高度
var svg = d3.select('body') //選擇<tbody>
.append('svg') //在<tbody>中新增<svg>
.attr('width', width) //設定<svg>的寬度屬性
.attr('height', height) //設定<svg>的高度屬性
var padding = {top: 20, right: 20, bottom: 20, left: 20}; //定義上下左右的內邊距
//矩形所佔的寬度（包括空白）
var rectStep = 35;
//矩形所佔的寬度（不包括空白）
var rectWidth = 30;
//繪製矩形
var rect = svg.selectAll('rect')
.data(datest) //繫結資料
.enter()
.append('rect') //新增rect元素，使他的數量和陣列長度一致
.attr('fill', 'steelblue') //設定顏色為steelblue
.attr('x', function(d,i) {
return padding.left + i * rectStep; //設定矩形的x座標
})
.attr('y', function(d) {
return height - padding.bottom - d; //設定矩形的y座標
})
.attr('width', rectWidth) //設定矩形的寬度
.attr('height', function(d) {
return d; //設定矩形的高度
});
//新增文字部分
var text = svg.selectAll('text')
.data(datest)
.enter()
.append('text')
.attr('fill', 'white')
.attr('font-size', '14px')
.attr('text-anchor', 'middle')
.attr('x', function(d,i) {
return padding.left + i * rectStep;
})
.attr('y', function(d) {
return height - padding.bottom - d;
})
.attr('dx', rectWidth / 2) //dx是相對於x平移的大小
.attr('dy', '1em') //dy是相對於y平移的大小
.text(function(d) {
return d;
});
//更新資料
function draw() {
//獲取矩形的update部分
var updateRect = svg.selectAll('rect')
.data(datest);
//獲取矩形的enter部分
var enterRect = updateRect.enter();
//獲取矩形的exit部分
var exitRect = updateRect.exit();
//1.矩形的update部分的處理方法
updateRect.attr('fill', 'steelblue') //設定顏色為steelblue
.attr('x', function(d,i) { //設定矩形的x座標
return padding.left + i * rectStep;
})
.attr('y', function(d) { //設定矩形的y座標
return height - padding.bottom - d;
})
.attr('width', rectWidth) //設定矩形的寬度
.attr('height', function(d) { //設定矩形的高度
return d;
});
//2.矩形的enter部分處理辦法
enterRect.append('rect')
.attr('fill', 'steelblue') //設定矩形的顏色
.attr('x', function(d,i) { //設定矩形的x座標
return padding.left + i * rectStep;
})
.attr('y', function(d) { //設定巨型的y座標
return height - padding.bottom - d;
})
.attr('width', rectWidth) //設定矩形的寬度
.attr('height', function(d) { //設定矩形的高度
return d;
});
//3.矩形的exit處理方法
exitRect.remove();
//獲取文字的update部分
var updateText = svg.selectAll('text')
.data(datest);
//獲取文字的enter部分
var enterText = updateText.enter();
//獲取文字的exit部分
var exitText = updateText.exit();
//1.文字的update部分的處理方法
updateText.attr('fill', 'white')
.attr('font-size', '14px')
.attr('text-anchor', 'middle')
.attr('x', function(d,i) {
return padding.left + i * rectStep;
})
.attr('y', function(d) {
return height - padding.bottom - d;
})
.attr('dx', rectWidth / 2) //dx是相對於x平移的大小
.attr('dy', '1em') //dy是相對於y平移的大小
.text(function(d) {
return d;
});
//2.文字的enter部分的處理方法
enterText.append('text')
.attr('fill', 'white')
.attr('font-size', '14px')
.attr('text-anchor', 'middle')
.attr('x', function(d,i) {
return padding.left + i * rectStep;
})
.attr('y', function(d) {
return height - padding.bottom - d;
})
.attr('dx', rectWidth / 2) //dx是相對於x平移的大小
.attr('dy', '1em') //dy是相對於y平移的大小
.text(function(d) {
return d;
});
//3.文字的exit處理辦法
exitText.remove();
}
//排序函式
function mySort() {
datest.sort(d3.ascending);
draw();
}
//增加一個項函式
function myAdd() {
datest.push(Math.floor(Math.random() * 100));
draw();
}
</script>
<div class="box">
<button type="button" onclick="mySort()">排序</button>
<button type="button" onclick="myAdd()">增加資料</button>
</div>
</body>
</html