博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
怎样一步步用D3画多曲线
阅读量:6197 次
发布时间:2019-06-21

本文共 808 字,大约阅读时间需要 2 分钟。

Bar Chart: 

这是一个画柱状图的基本形式。


Axis是数轴;

tickets是数轴上的标尺。tickets第二个參数% 能够使[0, 1]的数以百分比显示;

rangeRoundBands 在[0, width] 上按区间划分。正好适合柱状图,rangePoints 在[0, width] 上按点位划分;

transform 是相对于父节点变换坐标的数目。

function type 先于load tsv文件运行。程序异步进行。


Bar Chart III: 

tutorial 给出的画柱状图的终于最简形式。


Tick Format: 

数轴tickets方法的演示,发现tickets第一个參数(在数轴上打点)传入后,在图形中数轴上点(line)的个数只和传入參数有相关关系。


Log Axis: 

Log形式的数轴。tickSize第一个參数表示在数轴上打点line的长度。


ggplot2-Style Axis: 

特殊的数轴,展示数轴上点line 单双数有不同的css style。



Line Chart: 

横轴日期,纵轴价格,画一条曲线。

d3.time.format, d3.time.scale 两个时间有关的对象。


最重要的是d3.svg.line 函数,能够在path上增加d 属性,画一条曲线。


Multi-Series Line Chart: 

横轴日期,纵轴温度,画不同城市的温度对照曲线。

d3.scale.category10 区分不同颜色。

interpolate 给画的曲线加点修饰;

比較tricky的地方是对数据的又一次处理cities。好方便批量的画不同曲线。



问题:

D3 的演示样例给出的都是从tsv读数据。而现实中我们通经常使用ajax读取后台数据:

如何用线条、柱状图等多种方式表示Multi-Series Chart: 


资源:

Tutorial:

供查找的API:

转载地址:http://atjca.baihongyu.com/

你可能感兴趣的文章
【转】Struts2 和 Spring MVC对比
查看>>
【Hibernate步步为营】--继承映射具体解释
查看>>
Android -- ImageLoader简析
查看>>
『一些同学学不好C语言,把罪责归于「因为教材是谭浩强写的」实在是很滑稽』吗?...
查看>>
mysql 索引相关知识
查看>>
自定义控件出现“loaded nib but the view outlet was not set”
查看>>
深信服笔试题(网络project师售后)
查看>>
我是一个线程(修订版)
查看>>
成都Uber优步司机奖励政策(4月4日)
查看>>
C语言+SDL2 图形化编程
查看>>
Oracle数据库之SQL基础(二)
查看>>
mybati之#与$的区别
查看>>
常用命令收集
查看>>
似懂非懂的localStorage和sessionStorage
查看>>
阿里移动技术峰会的一些体会 2015-07-04
查看>>
Visual Studio 连接 SQL Server 的connectionStringz和
查看>>
VMware unrecoverable error解决方法
查看>>
Keepalived
查看>>
JS判断只能是数字和小数点
查看>>
jQuery缓存机制(二)
查看>>