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直方图
案例：
D3临摹作业(西安交大国家艺术基金数据可视化培训第17天)

<!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>

上一篇： CISCO XRV-9K KVM虚机启动问题

D3临摹作业(西安交大国家艺术基金数据可视化培训第17天)

第三章 D3数据可视化基础

第一节 D3可视化API概述

第二节 D3数据绑定

第四节 Json文件格式 一 Json概述

二 Json的使用

D3临摹作业(西安交大国家艺术基金数据可视化培训第17天)

D3临摹作业(西安交大国家艺术基金数据可视化培训第25天)

第四节 Json文件格式
一 Json概述