Bar Chart: http://bl.ocks.org/mbostock/3885304
这是一个画柱状图的基本形式。
Axis是数轴;
tickets是数轴上的标尺。tickets第二个參数% 能够使[0, 1]的数以百分比显示;
rangeRoundBands 在[0, width] 上按区间划分。正好适合柱状图,rangePoints 在[0, width] 上按点位划分;
transform 是相对于父节点变换坐标的数目。
function type 先于load tsv文件运行。程序异步进行。

Bar Chart III: http://bl.ocks.org/mbostock/7441121
tutorial 给出的画柱状图的终于最简形式。

Tick Format: http://bl.ocks.org/mbostock/9764126
数轴tickets方法的演示,发现tickets第一个參数(在数轴上打点)传入后,在图形中数轴上点(line)的个数只和传入參数有相关关系。

Log Axis: http://bl.ocks.org/mbostock/5537697
Log形式的数轴。tickSize第一个參数表示在数轴上打点line的长度。

ggplot2-Style Axis: http://bl.ocks.org/mbostock/4349486
特殊的数轴,展示数轴上点line 单双数有不同的css style。

Line Chart: http://bl.ocks.org/mbostock/3883245
横轴日期,纵轴价格,画一条曲线。
d3.time.format, d3.time.scale 两个时间有关的对象。
最重要的是d3.svg.line 函数,能够在path上增加d 属性,画一条曲线。

Multi-Series Line Chart: http://bl.ocks.org/mbostock/3884955
横轴日期,纵轴温度,画不同城市的温度对照曲线。
d3.scale.category10 区分不同颜色。
interpolate 给画的曲线加点修饰;
比較tricky的地方是对数据的又一次处理cities。好方便批量的画不同曲线。

问题:
D3 的演示样例给出的都是从tsv读数据。而现实中我们通经常使用ajax读取后台数据:http://stackoverflow.com/questions/22784164/what-is-the-best-way-to-update-d3-charts-using-ajax
如何用线条、柱状图等多种方式表示Multi-Series Chart: http://www.delimited.io/blog/2014/3/3/creating-multi-series-charts-in-d3-lines-bars-area-and-streamgraphs

资源:
Tutorial:https://github.com/mbostock/d3/wiki/Tutorials
供查找的API:https://github.com/mbostock/d3/wiki/API-Reference

怎样一步步用D3画多曲线相关推荐

  1. python脚本——图片重命名、图片合成视频、faster-rcnn画P-R曲线

    调试faster rcnn算法实用的python脚本 目录 调试faster rcnn算法实用的python脚本 一.前言 二.常用python脚本 三.后记 一.前言 最近在做关于目标检测算法的研究 ...

  2. python 画pr曲线

    roc曲线: python 画roc曲线_jacke121的专栏-CSDN博客 import _pickle as cPickle import matplotlib.pyplot as pltxxx ...

  3. python画曲线-如何通过python画loss曲线的方法

    1. 首先导入一些python画图的包,读取txt文件,假设我现在有两个模型训练结果的records.txt文件 import numpy as np import matplotlib.pyplot ...

  4. matlab的多项式拟合,函数求导,画函数曲线

    给一列数据. 拟合出该数据的函数曲线.多项式拟合. 然后画出函数曲线来.以及给出函数形式. 求导. 再画出导数的曲线.以及给出导数函数形式. matlab代码: clc close all clear ...

  5. 数据挖掘 python roc曲线_利用scikitlearn画ROC曲线实例

    一个完整的数据挖掘模型,最后都要进行模型评估,对于二分类来说,AUC,ROC这两个指标用到最多,所以 利用sklearn里面相应的函数进行模块搭建. 具体实现的代码可以参照下面博友的代码,评估svm的 ...

  6. python画PR曲线(precision-recall曲线)

    使用python画precision-recall曲线的代码是: sklearn.metrics.precision_recall_curve(y_true, probas_pred, pos_lab ...

  7. r roc函数_画ROC曲线的R包总结

    原标题:画ROC曲线的R包总结 作者: Joseph Rickert 原文链接: https://rviews.rstudio.com/2019/03/01/some-r-packages-for-r ...

  8. ios 画线平滑_iOS 画贝塞尔曲线 连续曲线 平滑曲线 曲线图表

    利用贝塞尔曲线画一段连续曲线 bezierDemo2.png bezierDemo1.png image.png 如果我们根据几个点画一条连续的曲线, 我们使用的方法是 - (void)addCurv ...

  9. 用matlab绘制P三曲线,知道曲线方程 怎么用matlab绘制三维图 一定要给出程序 , matlab怎样画三维曲线...

    导航:网站首页 > 知道曲线方程 怎么用matlab绘制三维图 一定要给出程序 , matlab怎样画三维曲线 知道曲线方程 怎么用matlab绘制三维图 一定要给出程序 , matlab怎样画 ...

最新文章

  1. 百度地图 osm地图 leaflet echarts webapck的组合使用时的踩坑记录
  2. Android4.0 Design之UI设计易犯的错误1
  3. 机器人x展架制作_门型展架80*180易拉宝x展架海报架广告架立牌展示架地推海报2元优惠券券后价20元...
  4. 基于jsf的项目_JSF基于事件的交流:新派方法
  5. 快抢!猪年之前最后一波送书福利,错过只能等“明年”
  6. 对于移动类型Z17和帐户64020100 物料号 (009)的不同的字段选择(公司间调拨)
  7. 转载:给自己一个警示
  8. nodejs计算时间间隔_nodejs 如何定时执行一个函数
  9. 几种支持动作模型格式的比较(MD2,MD5,sea3d) 【转】
  10. java对谷歌不兼容_谷歌浏览器不兼容的一些Js
  11. dos命令 oracle显示时间,Oracle 常用 Dos命令
  12. 怎样将手机屏幕投射到电脑
  13. 学习笔记:定积分的求解(矩形法)
  14. MDK5新建stm32l0xx(Cortex-M0)工程步骤
  15. qt中socket通信流程图_Qt学习 之 Socket通信(世界上最简单的例子了)
  16. 微型计算机中的rom跟ram关系,STC单片机内部扩展RAM的应用
  17. 2021-09-27 网安实验-文件恢复-DiskGenius恢复已删除文件
  18. html并排div可重叠,html – 并排堆叠div
  19. scrapy爬取京东图书的数据
  20. JAVA社区团购系统计算机毕业设计Mybatis+系统+数据库+调试部署

热门文章

  1. Eclipse - CDT使用GDB调试C++的问题-无源文件命名(No source file named)
  2. 敏捷游戏:从硬币游戏学习Scrum敏捷方法
  3. Windows系统安全模式妙用全接触
  4. 属性总结(一):marker
  5. 2/100. Hamming Distance
  6. Linux 配置yum本地安装源
  7. 第一章 C++ primer Plus
  8. Multidex(二)之Dex预加载优化
  9. 关于阿里巴巴iconfont的使用方法
  10. 常用正则表达式 验证电子邮件网址邮政编码等