D3.js-基础知识

本是古典何须时尚 2022-07-16 10:56 261阅读 0赞

**一、数据可视化**  
数据可视化起源于18世纪，当时使用柱形图和折线图来表示国家进出口量。近年，随着大数据时代的到来，数据可视化作为大数据量的呈现方式，成为当前重要的课题。数据可视化的目的，是要对数据进行可视化处理，以使得能够明确地、有效地传递信息。  
**二、D3**  
D3(Data-Driven Document)，是一个JavaScript的函数库，是用来做数据可视化的。Document即文档对象模型(DOM)。D3允许用户绑定任意数据到DOM，然后根据数据来操作文档，创建可交互式的图标。  
D3优势：  
数据能够与DOM绑定在一起；  
数据转化和绘制是对立的；  
代码简洁；  
大量布局；  
基于SVG(矢量图形)，缩放不会损失精度。  
**三、SVG**  
SVG，指可缩放矢量图形(Scalable Vector Graphics)，是用于描述二维矢量图形的一种图形格式。D3在SVG中绘制图形！！！ SVG使用XML格式来定义图形，可将SVG直接嵌入HTML中显示，也可以直接将文件名改为xxx.svg来使用。  
SVG中预定义了七种形状元素，分别为：矩形、圆形、椭圆、线段、折线、多边形、路径。  
![矩形][20161016131017054]

<svg width="1000" height="200" version="1.1" xmlns="http://www.w3.org/2000/svg">
        
        <rect x="20" y="20" width="200" height="100" style="fill: steelblue; stroke: blue; stroke-width:4; opacity: 0.5"></rect>
        
        <rect x="250" y="20" rx="10" ry="10" width="200" height="100" style="fill: steelblue; stroke: blue; stroke-width:4; opacity: 0.5"></rect>
    </svg>

效果图：  
![示例一图][20161016132148100]  
![圆形和椭圆形][20161016132348696]

<svg width="1000" height="300" version="1.1" xmlns="http://www.w3.org/2000/svg">
        
        <circle cx="150" cy="50" r="50" fill="blue"></circle>
        
        <ellipse cx="350" cy="150" rx="110" ry="80" style="fill: yellow; stroke: blue; stroke-width: 3"></ellipse>
    </svg>

![实例二][20161016132510886]  
![线段][20161016132626637]

<svg width="1000" height="500" version="1.1" xmlns="http://www.w3.org/2000/svg">
        
        <line x1="20" y1="20" x2="50" y2="50" style="stroke: black; stroke-width: 3"></line>
    </svg>

1.  多边形和折线

只有一个points参数，表示一系列的点坐标。  
不同之处是多边形会将终点和起点连接起来。

<svg width="1000" height="500" version="1.1" xmlns="http://www.w3.org/2000/svg">
        
        <polygon points="100,20 20,90 60,160 140,160 180,90" style="fill: green; stroke: black; stroke-width: 3"></polygon>
        
        <polyline points="400,220 320,290 360,360 440,360 480,290" style="fill:white; stroke: black; stroke-width: 3"></polyline>
    </svg>

![多边形][20161016132902401]  
![曲线1][1]  
![曲线2][2]

<svg width="1000" height="300" version="1.1" xmlns="http://www.w3.org/2000/svg">
        
        <path d="M30,100 L270,300 M30,100 H270 M30,100 V300" style="stroke: black; stroke-width: 3px;">
        </path>
    </svg>

![示例][20161016133434009]

<svg width="1000" height="200" version="1.1" xmlns="http://www.w3.org/2000/svg">
        
        <path d="M30,100 C100,20 190,20 270,100 S400,180 450,100" style="fill:white; stroke: black; stroke-width: 3px;">
        </path>
    </svg>
    
    <svg width="1000" height="200" version="1.1" xmlns="http://www.w3.org/2000/svg">
        
        <path d="M30,100 Q190,20 270,100 T450 100" style="fill:white; stroke: black; stroke-width: 3px;">
        </path>
    </svg>

![示例][20161016133602042]

<svg width="1000" height="500" version="1.1" xmlns="http://www.w3.org/2000/svg">
        
        <path d="M100,200 a200,150 0 1, 0 150,-150 Z" style="fill:yellow; stroke: blue; stroke-width: 3px;">
        </path>
    </svg>
    <svg width="1000" height="500" version="1.1" xmlns="http://www.w3.org/2000/svg">
        
        <path d="M100,200 A200,150 0 1, 0 250,50 Z" style="fill:yellow; stroke: blue; stroke-width: 3px;">
        </path>
    </svg>

![示例][20161016133730311]  
![文字][20161016133816404]

<svg width="500" height="300" xmlns="http://www.w3.org/2000/svg">
        <text x="100" y="150" dx="-50" dy="-50" rotate="0" textLength="90">
            I love <tspan fill="blue">D3</tspan>
        </text>
    </svg>

[20161016131017054]: /images/20220716/fc2163ca24a64977b160efc2729170a0.png
[20161016132148100]: /images/20220716/6826fb307c5d44b88b7d65de330988f8.png
[20161016132348696]: /images/20220716/89ba0d274cd148768b2411ce60f40521.png
[20161016132510886]: /images/20220716/8506fb9fe40144c28fe88a2f86f4ecc8.png
[20161016132626637]: /images/20220716/d3df28cb970142e3b7173139039080a9.png
[20161016132902401]: /images/20220716/54f545426d934681af870ffdcca569da.png
[1]: /images/20220716/f5563f17b0bb40efa3167e2e844448a0.png
[2]: /images/20220716/0ae0b13712bc4456855fd1003f60ad32.png
[20161016133434009]: /images/20220716/2adcaf67c82f44d89145cbedf2697e46.png
[20161016133602042]: /images/20220716/9ba5e6918077477e9dc791782b13c38f.png
[20161016133730311]: /images/20220716/da3e1c34c8aa461b969864608609d07a.png
[20161016133816404]: /images/20220716/4424c8d14f644cb98b8682b473199750.png

发表评论取消回复

表情：

评论列表（有 0 条评论，261人围观）

还没有评论，来说两句吧...

相关阅读

相关 JS 3D three.js

JS 3D 文章目录开始 About three.js(简介) 下载使用 -------------------- 最近发现了一个非常好

谁借莪１个温暖的怀抱￠/ 2023年02月22日 05:28/ 0 赞/ 9 阅读

相关 d3+js横向图

<!doctype html> <html> <head> <meta charset="utf-8"> <!

素颜马尾好姑娘i/ 2022年11月26日 01:44/ 0 赞/ 228 阅读

相关 d3.js 坐标轴设置

常用代码：一、定义坐标轴 // 数据 var dataset = [2.5, 2.1, 1.7, 1.3, 0.9]; // 定义比例尺

不念不忘少年蓝@/ 2022年09月01日 00:03/ 0 赞/ 235 阅读

相关 D3.js-基础知识

一、数据可视化数据可视化起源于18世纪，当时使用柱形图和折线图来表示国家进出口量。近年，随着大数据时代的到来，数据可视化作为大数据量的呈现方式，成为当前重要的课题。数据可

本是古典何须时尚/ 2022年07月16日 10:56/ 0 赞/ 262 阅读

相关 js基础知识

`<script>`的属性： type src charset async = “async”异步，下载完后立即执行（可以省略但是不建议省略） defer

迷南。/ 2022年06月13日 02:13/ 0 赞/ 317 阅读

相关 Js基础知识学习

主要学习内容： 1. ECMAScript 基础 2. js对象基础 3. 继承 ECMAScript 基础语法： \- 区分大小写 \- 变量弱

我不是女神ヾ/ 2022年06月03日 00:26/ 0 赞/ 281 阅读

相关【D3.js】D3是什么

D3是什么 D3 的全称是 Data-Driven Document，可以理解为：由数据来决定绘图流程的程序设计模型。 D3 是一个JavaScript的函数库，是用来

忘是亡心i/ 2022年06月02日 07:18/ 0 赞/ 316 阅读

相关 js的基础知识

1. 变量的定义方法体外带var的定义：全局变量方法体内带var的定义：局部变量方法体内不带var的定义：全局变量 2. 变量的作

清疚/ 2022年03月27日 04:28/ 0 赞/ 253 阅读

相关游戏开发3D基础知识

概念学习：向量向量简介我们将所有彼此平行的向量进行平移，使其起点与坐标原点重合，当某一向量的起始端与坐标原点重合，我们成该向量处于标准位置。这样，我们就可用

男娘i/ 2021年10月30日 04:31/ 0 赞/ 293 阅读

相关 D3.JS基础语法

D3基础知识集合一、引用API篇官网地址：[http://d3js.org/][http_d3js.org] 1、HTML页面中 d3.js在线api地

妖狐艹你老母/ 2021年07月25日 00:30/ 0 赞/ 432 阅读