• D3.js 简介和安装


    一、What´s D3.js

      D3.js是一种数据操作类型的javascript库(也可视其为插件);结合HTML,SVG和CSS,D3可以图形化的,生动的展现数据。

      D3 的全称是(Data-Driven Documents),顾名思义可以知道是一个被数据驱动的文档。就是一个 JavaScript 的函数库,使用它主要是用来做数据可视化的。

      D3 提供了各种简单易用的函数,简化了 JavaScript 操作数据的难度。本质上是 JavaScript ,所以用 JavaScript 也是可以实现所有功能的,但它能大大减小你的工作量,尤其是在数据可视化方面,D3 已经将生成可视化的复杂步骤精简到了几个简单的函数,你只需要输入几个简单的数据,就能够转换为各种绚丽的图形。

     

     

     

    二、为什么要数据可视化

      现在有一组数据, 【  4 , 32 , 15 , 16 , 42 , 25   】 ,比较难看出它们的大小关系但更直观的是用图形显示,如下图:

      0.Introduction

      通过图形的显示,能很清楚地知道他们的大小关系。当然,D3能力远不止如此,这只是一个很小的应用。把枯燥乏味复杂的数据,用简单明了的图形表示出来,这就是数据可视化。

    三、D3有多受欢迎

      D3 是一个开源项目,作者是纽约时报的工程师。D3 项目的代码托管于 GitHub(一个开发管理平台,目前已经是全世界最流行的代码托管平台,云集了来自世界各地的优秀工程师)。

      在 GitHub 上最受关注的项目:

      1

    四、安装D3.js

      D3(点击下载) 是一个 JavaScript 函数库,并不需要通常所说的“安装”。它只有一个文件,在 HTML 中引用即可。有两种方法:

        (1)下载 D3.js 的文件,解压后,在 HTML 文件中包含相关的 js 文件即可。

        (2)还可以直接包含网络的链接,这种方法较简单:但使用的时候要保持网络连接有效,不能再断网的情况下使用。     

           <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>




        

    五、学习 D3 需要什么预备知识

    • HTML:超文本标记语言,用于设定网页的内容
    • CSS:层叠样式表,用于设定网页的样式
    • JavaScript:一种直译式脚本语言,用于设定网页的行为
    • DOM:文档对象模型,用于修改文档的内容和结构
    • SVG:可缩放矢量图形,用于绘制可视化的图形

    六、需要什么工具

      制作网页常用的工具即可。

      记事本软件:Notepad++、Editplus、Sublime Text 等,选择自己喜欢的即可。

      浏览器:IE9 以上、Firefox、Chrome等,推荐用 Chrome

      服务器软件:Apache、Tomcat 等

      其中,服务器软件可能不是必须的,不过 D3 中有些函数需要将 HTML 文件放置于服务器目录下,才能正常使用,关于这点以后会再做说明。

       

  • 相关阅读:
    CSS3—— 2D转换 3D转换 过渡 动画
    CSS3——边框 圆角 背景 渐变 文本效果
    CSS3——表单 计数器 网页布局 应用实例
    CSS3——提示工具 图片廓 图像透明 图像拼接技术 媒体类型 属性选择器
    CSS3——对齐 组合选择符 伪类 伪元素 导航栏 下拉菜单
    CSS3——分组和嵌套 尺寸 display显示 position定位 overflow float浮动
    CSS3——盒子模型 border(边框) 轮廓(outline)属性 margin外边距 padding填充
    Eclipse连接数据库报错Local variable passwd defined in an enclosing scope must be final or effectively final
    数据库——单表查询
    数据库——添加,修改,删除
  • 原文地址:https://www.cnblogs.com/LO-ME/p/5382045.html
Copyright © 2020-2023  润新知