d3.js入门教程1-d3基础知识

文章目录

d3.js入门教程1-d3基础知识
1 HTML介绍
2 d3绘图入门
3 参考

d3.js是一个用于绘图的JavaScript 库。它可以可视化展示任何类型的数据。本文档展示了多个交互式示例，说明了d3.js的关键概念，从而生成了第一个基本散点图。

1 HTML介绍

1.1 什么是HTML？

HTML介绍：

HTML代表超文本标记语言。基本上，它是任何网站背后的语言。Mozilla 或 Safari 等 Web 浏览器会读取此类文件并将其翻译到网页中
在HTML文件中，组成网页的元素被创建，并由标签描述。例如，级别1的标题由h1标签表示，带有标签的段落，由p标签表示图像img
如果没有 html 的基本知识，就不可能学会d3.js

<!DOCTYPE html>

<!-- 添加标题 -->

<h1>First html document</h1>

<!-- 添加一行文字 -->

<p>This is my first sentence</p>

<!-- 添加链接-->

<p>This is <a href="https://www.d3-graph-gallery.com">a link to the d3 graph gallery</a></p>

First html document

This is my first sentence

This is a link to the d3 graph gallery

将上面的代码复制并粘贴到本地文件中。称之为test.html，便构建一个简单的网页。

1.2 自定义文档样式CSS

CSS代表级联样式表，它允许将特定样式应用于使用html创建的元素。



<!DOCTYPE html>

<!-- 将特定样式应用于inGreen类的元素 -->

<style>

  .inRed { color: red; }

  .inFont { font-size: 20px}

</style>

<!-- 添加标题，并添加相应的类 -->

<h1 class="inFont">First html document</h1>

<!-- 添加一行文字 -->

<p class="inRed">This is my first sentence</p>

<!-- 添加链接 -->

<p>This is <a href="https://www.d3-graph-gallery.com">a link to the d3 graph gallery</a></p>

First html document

This is my first sentence

This is a link to the d3 graph gallery

1.3 构建svg图形

svg代表可缩放矢量图形。它是一种矢量图像格式。基本上，它是一种允许使用代码构建形状的语言
d3.js图表实际上是一组svg组合在一起的形状
d3.js展示了不同形状的svg

<!DOCTYPE html>

<!-- 添加标题 -->

<h1>First html document</h1>

<!-- 添加一行文字 -->

<p>This is my first sentence</p>

<!-- 添加svg形状 -->

<svg>

  <circle style="fill: #69b3a2" stroke="black" cx=50 cy=50 r=40></circle>

</svg>

First html document

This is my first sentence

2 d3绘图入门

2.1 使用Javascript和d3.js修改元素

JavaScript是前端的三大核心技术之一。它实现了网页的交互性。d3.js是一个javascript库，对数据可视化特别有用。它允许创建、选择和修改元素。在下面的示例中， d3用于选择目标圆形并修改其stroke-width。虽然它还不是很令人印象深刻，但是我们将使用相同的过程来设置数百个圆的位置并得到散点图。

    <h1>First html document</h1>

    <!-- 添加标题 -->

    <p>This is my first sentence</p>

    <!-- 添加svg形状 -->

    <svg>

        <circle class="target" style="fill: #69b3a2" stroke="black" cx=50 cy=50 r=40></circle>

    </svg>

    <!-- 加载d3 -->

    <script src="https://d3js.org/d3.v4.js"></script>

    <script>

        d3

            .select(".target")  // 选择target类

            .style("stroke-width", 8) // 修改svg图形轮廓

            .style("opacity", 0.5) // 修改svg图形透明度

    </script>

2.2 Console.log()

浏览器运行Html，css和Javascript并将结果显示为网页，如果出现问题，会在浏览器控制台中发出通知，你可以在右键单击页面打开->检查->console，打开控制台，或者直接按F1。比如在控制台中输入，console.log(“sometext”)，就可以打印sometext字符串。

2.3 坐标系

构建d3.js图表首先创建一个svg元素。这个元素有width和height两个参数来控制大小，以像素为单位。左上角的坐标为x=0和y=0，左下角的坐标x=0和y=height，右上角的坐标x=width和height=0，和常见的图片坐标表示一样。显示三个圆的代码如下：



    <!-- 添加一个空的svg图片 -->

    <svg id="dataviz_area" height=200 width=450></svg>

    <!-- 加载d3.js -->

    <script src="https://d3js.org/d3.v4.js"></script>

    <script>

        var svg = d3.select("#dataviz_area")

        // 添加圆，cx和cy为圆心坐标，r为半径

        svg.append("circle")

            .attr("cx", 2).attr("cy", 2).attr("r", 40).style("fill", "blue");

        svg.append("circle")

            .attr("cx", 120).attr("cy", 70).attr("r", 40).style("fill", "red");

        svg.append("circle")

            .attr("cx", 300).attr("cy", 100).attr("r", 40).style("fill", "green");

    </script>

2.4 比例尺

如果想用百分比来表示svg中元素的位置，那么就需要用到比例尺，比例尺就是一个将像素值范围转换为位置百分比的函数。它被称为scale。如果我的数据是百分比并且我的svg区域是400px宽度。那么0%代表0px，100%代表400像素。50%代表200像素。比例尺有domain和range两个属性，range设置像素值范围，domain设置位置百分比。

    <!-- 添加一个空的svg图片 -->

    <svg id="viz_area" height=200 width=450></svg>

    <!-- 加载d3.js -->

    <script src="https://d3js.org/d3.v4.js"></script>

    <script>

        // 选择svg绘图区域

        var svg = d3.select("#viz_area")

        // 创建比例尺

        // 将0到400像素映射到0%到100%

        var x = d3.scaleLinear()

            .domain([0, 100])

            .range([0, 400]);

        // 尝试console.log(x(25))以查看x函数的用途。

        // 以百分比设置图片尺寸

        svg.append("circle")

            .attr("cx", x(10)).attr("cy", 100).attr("r", 40).style("fill", "blue");

        svg.append("circle")

            .attr("cx", x(50)).attr("cy", 100).attr("r", 40).style("fill", "red");

        svg.append("circle")

            .attr("cx", x(100)).attr("cy", 100).attr("r", 40).style("fill", "green");

    </script>

2.5 添加轴

d3提供了一些自动绘制轴的功能。这些轴始终与比例尺scale对应。axisBottom()创建一个水平轴，底部带有刻度和标签。axisLeft()将用于Y 轴。

    <!-- 添加一个空的svg图片 -->

    <svg id="viz_area" height=200 width=450></svg>

    <!-- 加载d3.js -->

    <script src="https://d3js.org/d3.v4.js"></script>

    <script>

        // 选择svg绘图区域

        var svg = d3.select("#viz_area")

        // 创建比例尺

        var x = d3.scaleLinear()

            .domain([0, 100])

            .range([0, 400]);

        // 显示与此比例对应的轴

        svg.call(d3.axisBottom(x));

        // 以百分比设置图片尺寸

        svg.append("circle")

            .attr("cx", x(10)).attr("cy", 100).attr("r", 40).style("fill", "blue");

        svg.append("circle")

            .attr("cx", x(50)).attr("cy", 100).attr("r", 40).style("fill", "red");

        svg.append("circle")

            .attr("cx", x(100)).attr("cy", 100).attr("r", 40).style("fill", "green");

    </script>

2.6 边距和偏移

轴位置经常需要调整，例如，X轴通常位于图表的底部。这归功于translation函数，应用.attr(“transform”, “translate(20,50)”)到一个元素，将其向右平移 20 像素，向底部平移 50 像素。



    <!-- 添加一个空的svg图片 -->

    <div id="Area"></div>

    <!-- 加载d3.js -->

    <script src="https://d3js.org/d3.v4.js"></script>

    <script>

        // 设置图形的尺寸和边距

        var margin = { top: 10, right: 40, bottom: 30, left: 30 },

            width = 450 - margin.left - margin.right,

            height = 400 - margin.top - margin.bottom;

        // 将svg对象附加到页面主体

        var svg = d3.select("#Area")

            .append("svg")

            // 留下空白

            .attr("width", width + margin.left + margin.right)

            .attr("height", height + margin.top + margin.bottom)

            .append("g") // 添加标尺

            .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); // 平移图像

        // 创建x轴比例尺

        var x = d3.scaleLinear()

            .domain([0, 100])

            .range([0, width]);

        svg.append('g')

            .attr("transform", "translate(0," + height + ")")

            .call(d3.axisBottom(x));

        // 创建y轴比例尺

        var y = d3.scaleLinear()

            .domain([0, 100])

            .range([height, 0]);

        svg.append('g')

            .call(d3.axisLeft(y));

    </script>

2.7 数据绑定

将数据绑定到svg元素是我们完成散点图所需的最后一步。在我看来，这也是最难理解的部分。它始终遵循相同的步骤：

svg: 选择图表所在的 svg 区域
.selectAll(“whatever”): 选择所有尚未创建的元素，我知道这很奇怪。
.data(data): 指定要使用的数据。
.enter(): 开始数据循环。以下代码将应用于data[0]，data[1]依此类推。
.append(“circle”)：对于每次迭代，添加一个圆圈。
.attr(“cx”, function(d){ return x(d.x) }): 给出圆的x位置。这里d将是data[0]，然后data[1]等等。

    <!-- 添加一个空的svg图片 -->

    <div id="scatter_area"></div>

    <!-- 加载d3.js -->

    <script src="https://d3js.org/d3.v4.js"></script>

    <script>

        // 设置图形的尺寸和边距

        var margin = { top: 10, right: 40, bottom: 30, left: 30 },

            width = 450 - margin.left - margin.right,

            height = 400 - margin.top - margin.bottom;

        // 将svg对象附加到页面主体

        var svG = d3.select("#scatter_area")

            .append("svg")

            .attr("width", width + margin.left + margin.right)

            .attr("height", height + margin.top + margin.bottom)

            .append("g")

            .attr("transform",

                "translate(" + margin.left + "," + margin.top + ")");

        // 创建数据

        var data = [{ x: 10, y: 20 }, { x: 40, y: 90 }, { x: 80, y: 50 }]

        // 创建x轴比例尺

        var x = d3.scaleLinear()

            .domain([0, 100])

            .range([0, width]);

        svG.append('g')

            .attr("transform", "translate(0," + height + ")")

            .call(d3.axisBottom(x));

        // 创建y轴比例尺

        var y = d3.scaleLinear()

            .domain([0, 100])

            .range([height, 0]);

        svG.append('g')

            .call(d3.axisLeft(y));

        // 添加数据

        svG.selectAll("whatever")

            .data(data)

            .enter()

            .append("circle")

            .attr("cx", function (d) { return x(d.x) })

            .attr("cy", function (d) { return y(d.y) })

            .attr("r", 7)

    </script>

3 参考

intro_d3js

[数据与分析可视化] D3入门教程1-d3基础知识的更多相关文章

WCF入门教程：WCF基础知识问与答(转)
学习WCF已有近两年的时间,其间又翻译了Juval的大作<Programming WCF Services>,我仍然觉得WCF还有更多的内容值得探索与挖掘.学得越多,反而越发觉得自己所知太 ...
[数据与分析可视化] D3入门教程2-在d3中构建形状
d3.js入门教程2-在 d3.js中构建形状文章目录 d3.js入门教程2-在 d3.js中构建形状形状的添加圆形的添加矩形的添加线段的添加文本的添加折线的添加区域的添加圆弧的添加 ...
使用Code First建模自引用关系笔记 asp.net core上使用redis探索(1) asp.net mvc控制器激活全分析语言入门必学的基础知识你还记得么？反射
使用Code First建模自引用关系笔记原文链接一.Has方法: A.HasRequired(a => a.B); HasOptional:前者包含后者一个实例或者为null HasR ...
[数据与分析可视化] D3入门教程3-d3中的数据操作
d3.js入门教程3-d3.js中的数据操作文章目录 d3.js入门教程3-d3.js中的数据操作数学操作对象和数组过滤Filtering 排序Sorting 映射group 循环loop 重 ...
Wireshark数据包分析(一)——使用入门
Wireshark简介: Wireshark是一款最流行和强大的开源数据包抓包与分析工具,没有之一.在SecTools安全社区里颇受欢迎,曾一度超越Metasploit.Nessus.Aircrack ...
WPF入门教程系列一——基础
一. 前言最近在学习WPF,学习WPF首先上的是微软的MSDN,然后再搜索了一下网络有关WPF的学习资料.为了温故而知新把学习过程记录下来,以备后查.这篇主要讲WPF的开发基础,介绍了如何使用V ...
Thrift入门初探(2)--thrift基础知识详解
昨天总结了thrift的安装和入门实例,Thrift入门初探--thrift安装及java入门实例,今天开始总结一下thrift的相关基础知识. Thrift使用一种中间语言IDL,来进行接口的定义, ...
《Python编程：从入门到实践》基础知识部分学习笔记整理
简介此笔记为<Python编程:从入门到实践>中前 11 章的基础知识部分的学习笔记,不包含后面的项目部分. 书籍评价从系统学习 Python 的角度,不推荐此书,个人更推荐使用< ...
Apache Shiro 快速入门教程，shiro 基础教程
第一部分什么是Apache Shiro 1.什么是 apache shiro : Apache Shiro是一个功能强大且易于使用的Java安全框架,提供了认证,授权,加密,和会话管理 ...

随机推荐

手把手教你使用LabVIEW OpenCV dnn实现图像分类（含源码）
@ 目录前言一.什么是图像分类? 1.图像分类的概念 2.MobileNet简介二.使用python实现图像分类(py_to_py_ssd_mobilenet.py) 1.获取预训练模型 2.使 ...
mysql 过程和函数语法学习笔记
CREATE DEFINER=`root`@`%` PROCEDURE `test`(`num` int) BEGIN /*定义变量*/ DECLARE sex TINYINT(2) DEFAULT ...
19.MongoDB系列之批量更新写入Groovy版
Groovy作为脚本,比Java在数据处理中具有更高的灵活性 // 获取mongo连接略 .... def count = 0 for(Township town : townships) { Doc ...
在IDEA 、springboot中使用切面aop实现日志信息的记录到数据库
文章目录 1.导入相关的依赖 2.创建要保存的数据信息实体类 3 .编写对应的sql语句 4.使用spring 的 aop 技术切到自定义注解上,所以先创建一个自定义注解类 5. 创建aop切面实现类 ...
齐博x1非正常修改后台入口admin.php导致的问题
如果你不是从后台基础设置修改后台入口admin.php文件名的话,也即强行通过FTP修改admin.php文件的名的话,就会导致网站会运行异常比如会出现不能上传文件之类的.如下图所示
【Kubernetes】K8s笔记（十一）：Ingress 集群进出流量总管
目录 0. Ingress 解决了什么问题 1. Ingress Controller 2. 指定 Ingress Class 使用多个 Ingress Controller 3. 使用 YAML 描 ...
day50-正则表达式01
正则表达式01 5.1正则表达式的作用正则表达式的便利在一篇文章中,想要提取相应的字符,比如提取文章中的所有英文单词,提取文章中的所有数字等. 传统方法是:使用遍历的方式,对文本中的每一个字符进行 ...
前后端分离项目(十一):实现"删"功能(前后端)
好家伙,本篇介绍如何实现"删"功能来看效果, 数据库 (自然是没什么毛病) "增"搞定了,其实"删"非常简单 (我不会告诉你我是为了水一 ...
Day16自定义异常
package com.exception.demo02;//自定义的异常类public class MyException extends Exception{ //传递数字>10抛出异常 p ...
C#和Halcon交互实现图片的放大和缩小
[转载] C#和halcon实现图片的放大和缩小 e.Delta>0表示鼠标向上滚动,e.Delta<0表示向下滚动要拖动的图像为Measure.currentImageL,可以更换. ...

[数据与分析可视化] D3入门教程1-d3基础知识

d3.js入门教程1-d3基础知识

文章目录

1 HTML介绍

1.1 什么是HTML？

First html document

1.2 自定义文档样式CSS

First html document

1.3 构建svg图形

First html document

2 d3绘图入门

2.1 使用Javascript和d3.js修改元素

2.2 Console.log()

2.3 坐标系

2.4 比例尺

2.5 添加轴

2.6 边距和偏移

2.7 数据绑定

3 参考

[数据与分析可视化] D3入门教程1-d3基础知识的更多相关文章

随机推荐

热门专题