可视化基础知识入门教程分析数据(比例尺添加数据可视化元素)「比例数据可视化包括哪些方法」

d3.js入门教程1-d3基础知识文章目录d3.js入门教程1-d3基础知识1 HTML介绍1.1 什么是HTML？1.2 自定义文档样式CSS1.3 构建svg图形2 d3绘图入门2.1 使用Javascript和d3.js修改元素2.2 Console.log()2.3 坐标系2.4 比例尺2.5 添加轴2.6 边距和偏移2.7 数据绑定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 documentThis is my first sentenceThis is a link to the d3 graph gallery将上面的代码复制并粘贴到本地文件中。
称之为test.html，便构建一个简单的网页。
1.2 自定义文档样式CSSCSS代表级联样式表，它允许将特定样式应用于使用html创建的元素。

<!DOCTYPE html><!-- 将特定样式应用于inGreen类的元素 --><style>  .inRed { color: red; }  .inFont { font-size: 20px}</style><!-- 添加标题，并添加相应的类 --><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 documentThis is my first sentenceThis is a link to the d3 graph gallery1.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 documentThis is my first sentence2 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