d3项目开发系列教程3

d3系列课程1

安装

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

官网：https://d3js.org

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

安装途径

2.npm install d3

补充解释

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

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

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

4.d3用svg和vml实现

使用

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

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

1.线性对应




    
    Document

解释一下：

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

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

那clamp，是做什么？

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

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

2.时间格式处理




    
    Document

同样的道理，之前是数字，现在我们用时间做输入参数，就得到了我们的新对象timeScale，

它跟例子一的区别就是，之前输入一个数字对应到指定范围，而scaleTime是将时间内的某一天对应到数字数字间隔百分比上去。

3.量化对应




    
    Document

这个例子大家可能一看就懵逼了，为啥22是red，其实是这样的，.domain([0, 100])把整个范围

分成两块儿，

0~50 22落在前面了，那么对应red

50~100 88就是 green

那么问题来了，

如果有三个颜色，那么其中一个white 反过来对应的色域范围呢？

33.33~66.666

这个功能在一些用颜色表示程度的地方很有用，不如污染指示。

从绿到红可以 1-100表示污染程度

4.一次对应

上面的例子我们说点是连续的对应，而有时候我们需要的是，单个特殊的对应比如




    
    Document

上面1,2,3,4其实有很多用途，比如我们画图的时候需要标注尺度。数据可视化其实最重要的还有一个就是前提你得有数据，

那么数据的加载就是非常重要的了。

数据文件：

[
    {
        "name":"leo",
        "score":99

    },
    {
        "name":"zhangsan",
        "score":66

    },
    {
        "name":"lisi",
        "score":32

    },
    {
    "name":"wangwu",
    "score":43

    },
    {
        "name":"wangwu",
        "score":79

    }
]

html文件：




    
    Document

折腾半天数据也没有给我折腾到页面里面去，这是个很让人懊恼的事情，不过不要急，为什么，你只都能够把数据绑定搞定

获取个元素简直是简单的令人发指，一句话顺江搞定，你会querySelector和querySeletorAll不？好了，如何获取元素讲完了，不信你看……

修改元素，

不墨迹，最后一个dom操作创建元素

d3项目开发系列教程3

d3系列课程1

安装

使用

1.线性对应

2.时间格式处理

你可能感兴趣的:(d3项目开发系列教程3)