d3项目开发系列教程1

d3系列课程1

安装

没那么多时间墨迹为什么用它，直接上安装

官网：https://d3js.org

gitHub:https://github.com/d3/d3

安装途径

​ 1.

​ 2.npm install d3

补充解释

​ 1.d3.v4.min下载下来就行

​ 2.我用贴近开发的用法而不是教学演示，所以我采用min版本

​ 3.npm安装方法我就不说了，我还得说npm的使用方法

​ 4.d3用svg和vml实现

使用

​ d3是将数据可视化的一个库，那么说个实际项目，假如我们现在有一个分数统计系统，那么第一步基础的工作是什么？

首先你得把后台给你的数据跟前端的页面中可视化元素绑定起来，那么第一个例子就来了，把后台提供的数据，绑定到前端页面。这个时候我仅仅是数据关联，不做可视化展示，比如做一个折线图，那是后面的工作。从最基础的开始

1.线性对应

解释一下：

​ 假如数据库中的分数是0-100，但是设计师给我的设计图是一百分对应的是600px高度的柱状图，那怎么办？

简单,domain() 是你的分数范围，0,600是你实际在页面显示的范围。这个是线性对应变化。

​ 那clamp，是做什么？

​ 万一有人你不用管后台数据库人员傻不傻叉，万一他就给你一个 120分或者-20分，咋弄？我们也得处理成100和0.

​ 那么，万一现在300的柱状图高度，我想知道多少分，咋弄？invert。

2.时间格式处理

​ 有空再继续。

​