零基础自学前端 D3.js 初体验03 柱状图+排序
来源:互联网 发布:游泳池 溺水 数据 编辑:程序博客网 时间:2024/05/29 09:43
零基础自学前端 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实现柱状图
- struct hack和灵活的数组成员
- 动态规划算法
- ruby on rails 随机生成字符串的方法shuffle
- Linux mysql 忘记密码解决办法
- Java线程详解(深度好文)
- 零基础自学前端 D3.js 初体验03 柱状图+排序
- 多线程01
- StringBuffer StringBuilder
- 计算机网络笔记:字节序与比特序
- Hibernate_映射_继承结构映射1_使用一张表的方式
- 每日一题 No.43 Java基础学习(一)
- 如何指定CPU只运行特定任务,linux中断interrupt
- Mac下Android源码(AOSP)编译环境搭建方法
- iOS 真机调试报错 This application's application-identifier entitleme