欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

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

程序员文章站 2024-02-13 17:09:28
...

第三章 D3数据可视化基础
 

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


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虚机启动问题

下一篇: