D3入门教程系列

绘制地图时，如果不用echats之类的框架，则需要引入对应的地图数据，一般是在[https://geojson.cn/] 引入对应的地图数据，然后使用d3.js提供的相关方法进行绘制，话不多说，直接上

d3.brush() 区域选择: 作用：Brush 的功能是用来选取图表上的某一个区间，我们对此区间段内的元素做 (变色、移位、放大缩小等等)，类似于放大镜功能，适用于图表的某一块区域特殊处理之类的需

D3.zoom（） 缩放功能 针对于图表资料比较多的时候，可以进行放大或缩小查询，是比较使用的功能： 当我们使用 D3 设定缩放功能时，它其实同时包含了平移跟缩放两种功能，我们能使用鼠标的滚轮或手指触

D3.js drag 拖拽功能: 在使用图表呈现一些数据的交互效果时，难免会有一些需要使用拖拽效果的需求。所以是有必要了解一下drag拖拽的方法。 1.D3.drap() 方法用来创建拖拽事件， d3

D3.js 提示tip事件： 经常有这样的需求，图形上某一块区域需要做鼠标事件，移入需要展示一些数据之类的需求，其实这里就可以用到tips的功能了。 步骤其实并不麻烦，分为几步就行了： 1.生成svg

D3.js 鼠标事件 其实我们大家都比较熟悉js原生的鼠标事件，像鼠标点击/移动等事件，因为d3归根结底是操作的dom元素，所以一样是可以使用鼠标事件的，使用selection.on（）这个API即可

D3.js 动画效果 transition（）动画效果 主要是使用 selection.transition( ) 这个 API 来处理动画，由于是操作dom元素，因此要先用select() 的方法选

D3.JS中常用的绘制图形的的API 其实SVG 提供的图形标签（圆形、矩形、线条、路径等）其实只是构成图形的基本元素，一张完整图表则是由几百个这些小元件组成的，如果只使用 SVG 提供的图形，就需要

D3.js 操作数据的常用API方法 在画图表时，大部分时候后端回传的数据都是需要我们做进一步处理的（当然能搞定后端的人就随意啦), 这里介绍一些基本常用的API操作，其实大部分都是js中的Array

d3 数据绑定 d3的数据绑定是d3中最重要的知识点了，图像都需要数据支撑，所以掌握这个知识点非常重要。 d3官网提供了数据操作的多种API 我们要先用 d3.select 的方法选定DOM节点后，才

svg入门简单教程，SVG 是一种基于 XML 语法的图像格式，全称是可缩放矢量图（Scalable Vector Graphics）。其他图像格式都是基于像素处理的，SVG 则是属于对图像的形状描述

d3工作原理 d3是使用js语法去操作dom元素进行绘制图表；如果熟悉jquery语法可以很快的上手使用，学习d3需要熟悉以下相关知识： DOM API 与 事件模型 （掌握js操作dom的相关语法）

坐标轴： 想要系统学习d3.js绘图方法，这里记录一下基础相关教程，更多详尽教程请访问d3官网 坐标轴就是用于回执坐标轴显示的，X轴和Y轴，轴线的组成部分: 一条直线，标示轴线 一组沿着轴的刻度记号(

Selection选择器： 需要掌握的知识点：熟悉js选择器语法，取到了对应的dom元素才可以进行相关操作。 selection 选定节点 data binding 绑定数据 1.selection