随笔分类 - d3.js
摘要：上一章说了如何制作一个线路图，当然上一章是手写的JSON数据，当然手写的json数据有非常多的好处，例如可以应对客户的各种BT需求，但是大多数情况下我们都是使用地铁公司现成的JSON文件,话不多说我们先看一下百度官方线路图。 就是这样的，今天我们就来完成它的大部分需求，以及地铁公司爸爸提出来的需求。
阅读全文
摘要：地铁线路图的可视化一直都是路网公司的重点，今天来和大家一起绘制线路图。先上图。 点击线路按钮，显示相应的线路。点击线路图下面的站间按钮（图上未显示），上报站间故障。 首先就是制作json文件，这个文件包括两部分，一部分是站点信息，另一部分就是线路信息，由于时间问题，我只写了5条线路（10号线站点太t
阅读全文
摘要：今天在群里遇到一张图 遂来玩一玩，先来上图!! 点击相应按钮，开关线路，此项目的重点是计算相应图形的位置，由于是个性化项目就没有封装布局。好了直接上代码。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>$T
阅读全文
摘要：今天在d3.js官网上看到了一个烟花的DEMO，是canvas制作的，于是我想用d3.js来实现它，js代码只有几行。好了废话不多说，先上图。 1 js 类 因为烟花要有下落的效果，所以里面用到了一些简单的数学和物理知识来模拟重力， 2 css 代码 3 html 代码 是不是很简单 想预览或者下载
阅读全文
摘要：d3.js是一个不错的可视化框架，同时对于操作dom也是十分方便的。今天我们使用d3.js配合es6的类来制作一个童年小游戏–贪吃蛇。话不多说先上图片。 1. js snaker类 2. css 代码 3. html代码 有想预览或者下载demo的朋友请移步至个人博客 原文地址 http://www
阅读全文
摘要：d3.js是一个不错的可视化框架，同时对于操作dom也是十分方便的。今天我们使用d3.js配合es6的类来制作一个童年小游戏--俄罗斯方块。话不多说先上图片。 1. js tetris类 由于方法拆分的比较细所以加上了一些备注（这不是我的风格！） 2. css 代码 3. html代码 想预览或者下
阅读全文
摘要：上一节记录没有加上echarts的legend功能，这一小节补一下。 1. 数据 我们可以从echarts中看出，折线数据并不是我们传进入的原始数据（多数情况下我们也不会修改原始数据），而是原始数组的一个备份而已。备份数组的方法有很多。这里我是用了ES6的方法。 2.渲染上部分legend 如图 首
阅读全文
摘要：今天我们来仿echarts折线图,这个图在echarts是折线图堆叠，但是我用d3改造成了普通的折线图，只为了大家学习（其实在简单的写一个布局就可以）。废话不多说商行代码。 1 制作 Line 类 2 css 文件 3 HTML 文件 想预览和下载demo的朋友可以移步原文 原文地址 http://
阅读全文
摘要：由于最近工作不是很忙，隧由把之前的charts项目用d3.js重写的一下，其实d3.js文档很多，但是入门不是很难，可是想真的能做一个完成的，交互良好的图还是要下一番功夫的。今天在echarts找到了一个柱状图，如图。 模仿了一番，废话不多说。下面就开始我们的代码（注意是D3.v4版本）。 1. j
阅读全文
摘要：D3的全称是Data-Driven Documents（数据驱动的文档），是一个用来做数据可视化的JavaScript函数库，而JavaScript文件的后缀通常为.js，所以D3被称为D3.js。 d3.js可以定制出各种图形，今天来用d3.js制作一个简易的仪表盘,废话不多说先上demo，接下来
阅读全文
摘要：说到数据可视化，我们会行到很多优秀的框架，像echarts、highcharts，这些框架很优雅，健壮，能满足我们对可视化的大部分需求，但是缺点也很明显，就是这些框架几乎是不可定制化的，当遇到特殊的需求，那就太难了。这个时候，聪明的小伙伴会转而学习一些基础的，定制化程度更高的框架，而其中最杰出的就是
阅读全文
