原文:d3.js入门学习

个人感觉前端数据可视化是个趋势,并且现在所在公司也是有做这块的项目,虽然我目前还没有接触到公司数据可视化的项目,但是,今后总是要接触的嘛。 今天看了一下公司目前所用的两种数据可视化工具 D 和ECharts,ECharts由于是国产的,文档和demo都很全,简单看了一下,感觉很好上手,没有必要把太多时间花在ECharts上,反观D ,中文文档很匮乏,api讲得也不是很易于理解,但是功能很强大啊, ...

2018-11-08 00:36 0 914 推荐指数:

查看详情

D3.js 入门学习(一)

一、安装D3.js 1.网络连接 2.命令行安装 cnpm || npm install d3 --save => 我采用的是cnpm install d3 --save 3.创建node 服务器 a. cnpm || npm install express ...

Sun May 21 21:21:00 CST 2017 1 9605
D3.js学习(一)

从今天开始我将和大家一起学习D3.js(Data-Driven Documents),由于国内关于D3的学习资料少之又少,所以我觉得很有必要把自己学习过程记录下来,供同学们参考,如果文章有有哪些表达有错误的还希望同学们帮我指出来。当然了, 可以的话我希望大家都可以去看看英文资料(文章后面将列英文 ...

Tue Oct 15 01:03:00 CST 2013 15 35812
D3.js学习(四)

上一节我们已经学习了线条样式和格栅的绘制,在这一节中我们将要根据之前绘制的线条对图表进行填充,首先来看一下我们的目标吧 在这个图表中,我们对位于线条下面的空间进行了填充,那么,如何改做到呢? 设置填充样式 这里设置我们填充区域的样式,我们使用浅蓝色进行填充: .area ...

Wed Oct 16 07:28:00 CST 2013 1 2921
D3.js学习(六)

上节我们学习了如何绘制多条曲线, 以及给不同的曲线指定不同的坐标系。在这节当中,我们会对坐标轴标签相关的处理进行学习。首先,我们来想一个问题, 如何我们的x轴上的各个标签的距离比较近,但是标签名又比较长怎么办? 像是下面这种情况该如何处理? 上图中x轴上的标签是不是都重叠在一起了?非常恶心对不对 ...

Fri Oct 18 01:58:00 CST 2013 1 2683
D3.js学习(七)

上一节中我们学会了如何旋转x轴标签以及自定义标签内容,在这一节中,我们将接触动画(transition) 首先,我们要在页面上添加一个按钮,当我们点击这个按钮时,调用我们的动画。所以,我们还需要在原 ...

Mon Oct 21 19:37:00 CST 2013 4 2550
D3.js学习(五)

上一节我们已经学习了如何设置填充区域,其实理解了他的实现原理还是非常简单了。这一节中, 我们主要学习多条曲线的绘制,以及给不同的曲线指定不同的纵坐标。 新的数据 由于我们要画两条曲线,所以我们要在原来的基础上新增一组测试数据,现在我们的数据是这样的: date close ...

Thu Oct 17 19:31:00 CST 2013 6 3121
D3.js学习(二)

上一节中我们已经画出了一个基本的图表,不过忘了给坐标轴添加标签了,所以在本节中我们要给坐标轴加上标签,目标效果如下 给X轴添加标签 很明显,标签是不是一个text内容块啊,所以我们只要在svg ...

Tue Oct 15 01:09:00 CST 2013 2 5461
D3.js学习(三)

上一节中,我们已经画出了图表,并且给图表添加了坐标轴的标签和标题,在这一节中,我们将要学习几个绘制线条不同特性的几个函数,以及给图表添加格栅。ok,进入话题! 如何给线条设置绘制的样式? 这个其实非常简单,在我们之前定义的valueline基础上加一个.interpolate(“样式”)就行 ...

Tue Oct 15 19:21:00 CST 2013 1 5189
 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM