<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<button type='button' onclick='mysort()'>排序</button>
<button type='button' onclick='myadd()'>增加数据</button>
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script>
let dataset = [50, 43, 120, 87, 99, 167, 300];
// svg绘制区域的宽度
let width = 400;
// svg绘制区域的高度
let height = 400;
// 选择body
let svg = d3.select('body')
// 添加svg
.append('svg')
// 设置svg的宽度属性
.attr('width', width)
// 设置svg的高度属性
.attr('height', height);
// 定义上下左右的边距
let padding = {
top: 20,
right: 20,
bottom: 20,
left: 20
};
// 矩形所占宽度(包括百空), 单位像素
let rectStep = 35;
// 矩形所占宽度(不包括百空), 单位像素
let rectWidth = 30;
function draw () {
let updateRect = svg.selectAll('rect')
.data(dataset);
let enterRect = updateRect.enter();
let exitRect = updateRect.exit();
updateRect.attr('fill', 'steelblue')
.attr('x', function (d, i) {
return padding.left + i * rectStep;
})
.attr('y', function (d) {
return height - padding.bottom - d;
})
.attr('width', rectWidth)
.attr('height', function (d) {
return d;
})
enterRect.append('rect')
.attr('fill', 'steelblue')
.attr('x', function (d, i) {
return padding.left + i *rectStep;
})
.attr('y', function (d) {
return height - padding.bottom -d;
})
.attr('width', rectWidth)
.attr('height', function (d) {
return d;
});
exitRect.remove();
let updateText = svg.selectAll('text')
.data(dataset);
let enterText = updateText.enter();
let exitText = updateText.exit();
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)
.attr('dy', '1em')
.text(function (d) {
return d;
})
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)
.attr('dy', '1em')
.text(function (d) {
return d;
});
exitText.remove();
}
function mysort() {
dataset.sort(d3.ascending);
draw();
}
function myadd() {
dataset.push(Math.floor(Math.random() * 100))
draw()
}
</script>
</body>
</html>
D3.js 柱形图数据更新
猜你喜欢
转载自blog.csdn.net/weixin_41111068/article/details/82143915
今日推荐
周排行