d3.js

SVG（Scalable Vector Graphics）是一种矢量图形格式，用于在Web页面中显示图形。在SVG中，可以使用<svg>标签中的fill属性和CSS的style属性中的fill来设置填

首先，我们将专注于增强一个我们已经制作过的图表：我们的散点图。这个图表将有多个目标，所有的目标都在探索我们的天气数据集中的每日温度范围： 大多数日子的温度范围是否相似？ 还是寒冷的日子比温暖的日子变化

在讨论您的界面的一部分时，为事物使用普遍理解的名称很重要。 想象在不知道“按钮”这个词的情况下试图谈论一个按钮。 拥有图表的通用语言可以更轻松地谈论现有和潜在的图表。

颜色 创建图表最困难的部分之一是选择颜色。 错误的颜色会使图表没有吸引力、无效，最糟糕的是，难以阅读。 本节将为您提供选择颜色的良好框架、有关人类感知的重要事实以及简单的提示。

现在我们已经熟悉了如何创建图表，我们应该缩小一点 谈谈要创建什么图表。 到目前为止，我们已经创建了一个折线图、散点图和条形图， 但还有更多基本类型可供选择，不属于简单类别的图表。

目标 画一个世界地图，按照人口增长率绘制颜色，鼠标悬浮显示具体数据： 数据 数据就是我们绘制地图的地理信息数据，GeoJSON 是一个比较常见的格式。也可以很容易的找到各个国家和地区的现成数据。

简介 使用JavaScript创建图表的最大优点是能够响应用户的输入。在本章中，我们将了解用户可以与我们的图形交互，以及如何实现它们。 d3 events d3 selection 对象有一个.on(

效果 需求 每隔两秒 更新比例尺 所有的点按照新的比例尺重新定位 加一个点 —— 从左上角0，0移动到当相应位置 新加点初始绿色 移除一个点—— 当前页数据第一个点，变红直径渐变为0移除 七步走 获取

三种方式 SVG <animate> CSS transition d3.transition() SVG <animate> <animate> 是一个可以在svg内部定义的的原生元素。 但是它不支

前言 我们将完成最后一个基本图表--一旦完成,你会对每一步都感觉非常舒服，我们将转向更令人兴奋的概念，如动画和互动。 决定图表类型 决定图表类型我们可以问数据集的另一种问题是：指标的分布是什么样的？例

现在我们已经创建了我们的第一个图表，让我们创建另一个更复杂的图表。在本章的最后，我们将对在d3中制作图表所需的每个步骤有更深入的理解。

环境 vue3+typescript+d3@7.1.1 学习书籍 Fullstack.D3.and.Data.Visualization.r15.2020.4 目标 通过这本书入门d3 数据可视化进阶