零基础自学前端 D3.js 初体验03 柱状图+排序
来源:互联网 发布:mac用flash 编辑:程序博客网 时间:2024/05/30 22:42
零基础自学前端 D3.js 初体验03 柱状图+排序
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>d3</title>
</head>
<script src="https://d3js.org/d3.v4.min.js"></script>
<body>
<button type="button" name="button" onclick="mySort()">排序</button>
<button type="button" name="button" onclick="myAdd()">添加数据</button>
</body>
<script type="text/javascript">
var width = 1000,
height = 400,
dataset = [50, 90, 124, 86, 73, 64, 110, 107],
padding = {
top: 20,
right: 20,
bottom: 20,
left: 20
},
rectWidth = 30,
rectStep = 35;
var svg = d3.select("body")
.append("svg")
.attr("width", width)
.attr("height", height)
var rect = svg.selectAll("rect")
.data(dataset)
.enter()
.append("rect")
.attr("fill", "red")
.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;
});
var text = svg.selectAll("text")
.data(dataset)
.enter()
.append("text")
.attr("fill", "aqua")
.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;
});
function draw() {
var updateRect = svg.selectAll("rect")
.data(dataset);
var enterRect = updateRect.enter();
var exitRect = updateRect.exit();
var updateText = svg.selectAll("text")
.data(dataset);
var enterText = updateText.enter();
var exitText = updateText.exit();
updateRect.attr("fill", "red")
.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", "red")
.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();
updateText.attr("fill", "aqua")
.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", "aqua")
.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;
});
exitRect.remove();
}
function mySort() {
dataset.sort(d3.ascending);
draw();
}
function myAdd() {
dataset.push(Math.floor(Math.random() * 100));
draw();
}
</script>
</html>
零基础自学前端,你要的学习资料到了-web前端交流学习群018
- 零基础自学前端 D3.js 初体验03 柱状图+排序
- 零基础自学前端 D3.js 初体验03 柱状图+排序
- Web前端开发如何零基础自学
- d3.js多系列柱状图
- d3.js之多组柱状图
- 前端之js d3
- 利用d3.js绘制柱状图demo
- 自学日语,零基础
- 前端零基础入门
- 零基础前端学习
- 零基础开始自学python
- 零基础PHP自学路线图
- d3.js-svg图形基础
- 【d3.js学习--03】d3.json
- D3绘制柱状图
- D3实现分片柱状图
- d3画柱状图
- D3实现柱状图
- 【TensorFlow】tf.nn.conv2d是怎样实现卷积的?
- 小程序开发系列(六)获取群信息
- 操作系统之进程调度
- 产品推广的群体队列分析
- Permission denied (publickey)无权访问远程Git代码仓库
- 零基础自学前端 D3.js 初体验03 柱状图+排序
- 独立看门狗实验
- 模式识别之样本数据归一化(Normalization)与标准化(Standardization)
- No enclosing instance of type * is accessible. Must qualify the allocation with an enclosing instanc
- Spring MVC实现跳转的几种方式
- 三节点hadoop平台的搭建
- 路由器
- Go实战--实现一个单向链表(The way to go)
- serial.serialutil.SerialException: could not open port 'COM1': PermissionError(13, '拒绝访问。', None, 5)