D3临摹作业(西安交大国家艺术基金数据可视化培训第17天)
程序员文章站
2024-02-13 17:09:28
...
第三章 D3数据可视化基础
第一节 D3可视化API概述
1 定义
D3.js是一个JavaScript库，可以通过使用HTML、SVG和CSS把数据鲜活形象地展现出来。
wiki:D3.js由Mike Bostock[MikeBostock2010][MikeBostock2011]在provis基础上开发的。
2 地位：
GIthub上前端API排行第二（仅次于bootstrap）库，他比Processing简单，比Echarts*，此外他是开源软件。源码、中文手册托管在Github上。
3 基本功能
8个模块：
操作流程：加载数据-->绑定数据-->变换数据-->布局方式-->过渡元素
4 D3开发环境
软件下载：在http://d3js.org/下载最新版本的D3.js
软件加载：
<script src="https://d3js.org/d3.v5.min.js"></script>本地使用：
<script type="text/javascript" src="d3.v3.min.js" charset="UTF-8"></script>第二节 D3数据绑定
| 语法 | 案例 | |
| 选择函数 | select selectAll |
d3.select("p") d3.select("#namei") d3.select(".namei") var namei=ducument.getElementById("namei"); d3.select("namei") |
| 选择集 | selection.attr(name[,value]) selection.classed(name[,value]) selection.style(name[,value]) selection.text([value]) selection.append(name) selection.insert(name[,before]) selection.remove() |
|
| 数据绑定 | datum([value]) data([values[,key]]) |
案例：一个简单的批量绑定
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>D3.js简介</title>
<!--
<script src="https://d3js.org/d3.v5.min.js"></script>
-->
<script type="text/javascript" src="d3.min.js" charset="UTF-8"></script>
</head>
<body>
<p>数据可视化培训</p>
<p>古都西安</p>
<script type="text/javascript">
var temp=d3.selectAll("p"); //选择所有的 p元素
dataset=["国家艺术基金","2019年6月"];
temp.data(dataset) //绑定数组
.text(function(d,i){ //修改元素内容，function为自定义函数
return "NO." + i + ":" +d //返回字符串
});
console.log(temp);
</script>
</body>
</html>第三节 D3直方图
案例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>D3.js绘制直方图</title>
<!--
<script src="https://d3js.org/d3.v5.min.js"></script>
-->
<script type="text/javascript" src="d3.min.js" charset="UTF-8"></script>
</head>
<body>
<script type="text/javascript">
//设置窗口和尺寸
var w =(window.innerWidth
|| document.documentElement.clientWidth
|| document.body.clientWidth)*0.98;
var h =(window.innerHeight
|| document.documentElement.clientHeight
|| document.body.clientHeight)*0.9;
//绘制10个矩形
var dataset=new Array(10);
for(var i=0;i<10;i++){
dataset[i]=500*Math.random();
}
var svg=d3.select("body") //选择body
.append("svg") //添加svg到body
.attr("width",w) //设置svg的宽、高
.attr("height",h);
/* svg.append("rect") //添加rect元素
.attr("x",0) //设置矩形的x、y坐标
.attr("y",0)
.attr("width",100) //设置矩形的宽度、高度、颜色等
.attr("height",400)
.attr("fill","blue");
*/
svg.selectAll("rect") //选择所有的rect元素
.data(dataset) //绑定数据
.enter() //获取enter部分
.append("rect") //添加rect元素
.attr("x",function(d,i){ //设置矩形的x坐标偏移，i为下标
return i*(w/dataset.length);
})
.attr("y",function(d){ //设置矩形的y坐标偏移，i为下标
return h-d;
})
.attr("width",(w/dataset.length-10)) //设置矩形的宽度偏移，i为下标
.attr("height",function(d){ //设置矩形的高度偏移
return d;
})
.attr("fill","blue");
</script>
</body>
</html>第四节 Json文件格式
一 Json概述
1 概念与特点
- JSON 指的是 JavaScript 对象表示法（JavaScript Object Notation）
- JSON 是轻量级的文本数据交换格式
- JSON 独立于语言 *
- JSON 具有自我描述性，更易理解
- 对于 AJAX 应用程序来说，JSON 比 XML 更快更易使用：
2 JSON 语法规则
数据在名称/值对中 、数据由逗号分隔、花括号保存对象、方括号保存数组
JSON 使用 JavaScript 语法，所以无需额外的软件就能处理 JavaScript 中的 JSON。
var employees = [
{ "firstName":"Bill" , "lastName":"Gates" },
{ "firstName":"Thomas" , "lastName": "Carter" }
];
可以像这样访问 JavaScript 对象数组中的第一项：employees[0].lastName;
案例：代码来源：W3School
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>D3.js——在 JavaScript 中创建 JSON 对象</title>
<!--
<script src="https://d3js.org/d3.v5.min.js"></script>
-->
<script type="text/javascript" src="d3.min.js" charset="UTF-8"></script>
</head>
<body>
<h2>在 JavaScript 中创建 JSON 对象</h2>
<p>
Name: <span id="jname"></span><br />
Age: <span id="jage"></span><br />
Address: <span id="jstreet"></span><br />
Phone: <span id="jphone"></span><br />
</p>
<script type="text/javascript">
var JSONObject= {
"name":"Bill Gates",
"street":"Fifth Avenue New York 666",
"age":56,
"phone":"555 1234567"};
document.getElementById("jname").innerHTML=JSONObject.name
document.getElementById("jage").innerHTML=JSONObject.age
document.getElementById("jstreet").innerHTML=JSONObject.street
document.getElementById("jphone").innerHTML=JSONObject.phone
</script>
</body>
</html>
3 JSON编辑器
小工具很多：json在线 在线校验解析格式化JSON工具
二 Json的使用
1 把 JSON 文本转换为 JavaScript 对象
JSON 最常见的用法之一，是从 web 服务器上读取 JSON 数据，通过JavaScript 函数 eval() 转换为 JavaScript 对象，然后在网页中使用该数据。
var txt = '{ "employees" : [' + '{ "firstName":"Bill" , "lastName":"Gates" },' + '{ "firstName":"George" , "lastName":"Bush" },' + '{ "firstName":"Thomas" , "lastName":"Carter" } ]}';
var obj = eval ("(" + txt + ")");
2 D3读取并解析JSON
{
"name": "莲花朵朵",
"url": "http://www.csdn.com",
"address": {
"street": "西安交通大学.",
"city": "陕西西安",
"country": "中国"
},
"links": [
{
"name": "Google",
"url": "http://www.google.com"
},
{
"name": "Baidu",
"url": "http://www.baidu.com"
}
]
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>D3.j读json文件</title>
<!--
<script src="https://d3js.org/d3.v5.min.js"></script>
-->
<script type="text/javascript" src="../D3/d3.v5.min.js" charset="UTF-8"></script>
</head>
<body>
<p>节点信息</p>
<script type="text/javascript">
var mydata;
d3.json("test.json",function(error,data){
console.log(data.nodes);
//myFunction();
});
</script>
</body>
</html>