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安全框架,提供了认证,授权,加密,和会话管理 ...

随机推荐

为什么ArrayList的subList结果不能转换为ArrayList？？？？
subList是List接口中的一个方法,该方法主要返回一个集合中的一段子集,可以理解为截取一个集合中的部分元素,它的返回值也是一个List. 让我们初始化一个例子: import java.util ...
VMware vSphere 8.0 正式版下载
请访问原文链接:https://sysin.org/blog/vmware-vsphere-8/,查看最新版.原创作品,转载请保留出处. 作者主页:www.sysin.org vSphere 8.0 ...
频道插件如何对接圈子齐博x1齐博x2齐博x3齐博x4齐博x5齐博x6齐博x7齐博x8齐博x9齐博x10
圈子黄页里要显示对应频道的数据列表,一般没有特殊要求的话,不需要建立PHP文件, 只须要做好模板即可,比如 \template\index_style\default\qun\shop\index.h ...
python基础之open函数和路径处理
前言本次内容主要介绍文件处理open函数以及路径处理. 一.open函数根据前面介绍的函数调用方式,调用open函数. #open函数调用 open() TypeError: open() mis ...
Redis系列8：Bitmap实现亿万级数据计算
Redis系列1:深刻理解高性能Redis的本质 Redis系列2:数据持久化提高可用性 Redis系列3:高可用之主从架构 Redis系列4:高可用之Sentinel(哨兵模式) Redis系列5: ...
OCI runtime create failed: container_linux.go:349: starting container process caused "exec: "bash": executable file not found in $PATH": unknown
docker save docker save centos:self -o centos.tar 导出镜像到文件用于持久化镜像,导出的tar包需要用 docker load -i imagedat ...
JS 学习笔记（二）Ajax的简单使用
使用Ajax访问本地TXT文件 ajax.js // 创建请求对象 var ajax = new XMLHttpRequest(); // 建立连接 ajax.open('get', 'test.tx ...
成熟企业级开源监控解决方案Zabbix6.2关键功能实战-上
@ 目录概述定义监控作用使用理解监控对象和指标架构组成常用监控软件分析版本选型俗语安装部署方式部署 zabbix-agent 概述定义 Zabbix 官网地址 https:/ ...
CSS处理器-Less/Scss
HTML系列: 人人都懂的HTML基础知识-HTML教程 HTML元素大全(1) HTML元素大全(2)-表单 CSS系列: CSS基础知识筑基常用CSS样式属性 CSS选择器大全48式 CSS布局 ...
第2-3-1章文件存储服务系统-nginx/fastDFS/minio/阿里云oss/七牛云oss
目录文件存储服务 1. 需求背景 2. 核心功能 3. 存储策略 3.1 本地存储 3.2 FastDFS存储 3.3 云存储 3.4 minio 4. 技术设计文件存储服务全套代码及资料全部完 ...

[数据与分析可视化] 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基础知识的更多相关文章

随机推荐

热门专题