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基础知识

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 参考

猜你喜欢