博客专栏  >  前端   >  D3.js征途

D3.js征途

在如今的大数据时代,数据爆炸的时代,数据可视化越来越显得迫在眉睫。 d3.js作为现今最火的大数据可视化工具,其领先地位不可撼动。 本专栏记录作者在学习过程中的所见所感,并附上了完整的实现代码,几乎句句都有翻译,相信不论对于新手还是老手都是一种辅助和提高。

关注
4 已关注
23篇博文
  • d3系列2--api攻坚战08

    其实前面也是写了不少的内容了,那这一节可以自己尝试着创新一下 我将这一节的源码上传到了云盘 小伙伴们可以自己下载下来玩 奥巴马财政预算第一版模拟

    2016-03-25 10:37
    713
  • d3系列2--api攻坚战07

    今天的内容添加了一点儿交互性,不过这些交互性是由css控制的 除此之外,横坐标将不再使用传统的数字了,使用了字母来表示,所以先前的一些还是有区别的哦 .bar...

    2016-03-10 10:07
    1069
  • d3系列2--api攻坚战06

    这一节的东西相比上面一节的来说,多了一个布局,也就是layout 细心的先生们(女士们)会发现,只是将获取到的数据外面再加了一层函数。其实就是对我们获取到的数据进行了一步加工 展示的时候进行适当的...

    2016-03-08 17:16
    1004
  • d3系列2--api攻坚战05

    今天的内容相比之前的就有点儿难了?怂了没? 先看看效果图 其实如果用笨办法一条一条画的话,也不难。但是设想一下如果是很多很多条线呢?必须要用科学的数据组织方式才可以实现自动xxx。 下面的我最...

    2016-03-08 10:58
    971
  • d3系列2--api攻坚战04

    这次的图形可以叫做多维面积图或者复合面积图,在前两节的基础上添加了一些些的变化          小步快跑~  测测你能多快完成它          12mins 可以吗? ...

    2016-03-04 14:08
    1036
  • d3系列2--api攻坚战03

    如果你能在十分钟之内不看提示将02的柱状图画出来 ,那你才算吃透了它  我最快能9分多写完  在此基础上  你会发现今天的这个代码完全一样啊   需要注意的地方是css 下面是不写css和写css前后...

    2016-03-01 11:42
    503
  • d3系列2--api攻坚战02

    .area{ fill:steelblue; } var margin = {top:40,right:30,bottom:20,left:5...

    2016-02-26 10:57
    993
  • d3系列2--api攻坚战01---战前预备

    虽然拿d3很快的上手了,也通过了自己吭哧吭哧的处理数据,将想要的效果copy到了自己的项目中,但是回过头来发现,D3还是没有完全消化掉。 我发现d3的官方文档翻译的很不好,和图形相关的东西偏...

    2016-02-25 15:33
    664
  • 【d3.js教程15】如何从excel等表格生成csv数据

    使用openoffice软件 按照下面的格式输入数据,注意最开始的一行是他们的属性,要用英文字母输入 d3.csv("third.csv",fu...

    2016-01-07 16:05
    1158
  • 【d3.js教程14】可拖动的地图详解

    中国地图 *{ margin: 0; padding: 0; } .link { stroke: #ccc; ...

    2016-01-07 14:12
    1860
  • 【d3.js教程13】气泡图一维与多维展示以及数据处理

    在教程11中,讲述了如何制定颜色,今天要说的是维度的选择以及数据的处理 很多情况下,给我们提供的数据并不是我们想要的数据格式,这个时候你只需要写一个函数 写函数处理数据格式往往是最...

    2016-01-06 11:56
    4448
  • 【d3.js教程12】地图

    中国地图 *{ margin: 0; padding: 0; } var width = 1000; var height = 1000; ...

    2016-01-05 15:52
    1111
  • 【d3.js教程11】气泡图指定颜色

    下面我们将值为负数的圈圈表示成红色 思路是这样的,因为存在一个自动生成半径r的情况,所以在这一步之前数据必须是负数,否则会报错 懒得细细写了  全贴出来自己看 ...

    2016-01-05 13:53
    2940
  • 【d3.js教程10】气泡图bubble chart

    text{ font-size: 7px; } var diameter = 300, //设置...

    2016-01-04 22:25
    4623
  • 【d3.js教程09】包图pack

    text{ font-size: 4px; } var width =300; var height =300; var svg = d3.s...

    2015-12-31 16:42
    1054
  • 【d3.js教程08】集群图cluster

    .node{ fill:white; /*白色填充*/ stroke:red; /*红色边界*/ stroke-width: 1px; } text{ ...

    2015-12-31 16:10
    1558
  • 【d3.js教程07】弦图

    var svg = d3.select("svg"); var city_name = [ "北京" , "上海" , "广州" , "深圳" , "香港" ]; var po...

    2015-12-31 14:10
    882
  • 【d3.js教程06】force 力导向图

    .good{ font-size: 10px; } var width=500; var height= 500; var ...

    2015-12-31 10:33
    3089
  • 【d3.js教程05】简单的图标之弧形

    首先前面用到了很多的enter(),在这里用一张图片显示 不解释了哈自己试一试 接下来的内容就要涉及到布局了,什么布局,其实就是数据处理 相比别的绘图工具,d3对数据的处...

    2015-12-30 14:58
    1525
  • 【d3.js教程04】互动第一步

    d3动态第一课

    2015-12-29 21:49
    690
img博客搬家
img撰写博客
img发布 Chat
img专家申请
img意见反馈
img返回顶部