怎样一步步用D3画多曲线

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

时间: 2024-10-12 22:32:29

怎样一步步用D3画多曲线的相关文章

python sklearn画ROC曲线

preface:最近<生物信息学>多次谈到AUC,ROC这两个指标,正在做的project,要求画ROC曲线,sklearn里面有相应的函数,故学习学习. AUC: ROC: 具体使用参考sklearn: http://scikit-learn.org/stable/modules/generated/sklearn.metrics.roc_curve.html http://scikit-learn.org/stable/auto_examples/model_selection/plot_

MATLAB画ROC曲线,及计算AUC值

根据决策值和真实标签画ROC曲线,同时计算AUC的值 function auc = roc_curve(deci,label_y) %%deci=wx+b, label_y, true label [val,ind] = sort(deci,'descend'); roc_y = label_y(ind); stack_x = cumsum(roc_y == -1)/sum(roc_y == -1); stack_y = cumsum(roc_y == 1)/sum(roc_y == 1); a

C++模拟Turtle画希尔伯特曲线

由于缺少支持库,本代码不可实际运行! 仅供思路研究. 1 void up() 2 { 3 turtle.forward(1); 4 } 5 void left() 6 { 7 turtle.left(90); 8 turtle.forward(1); 9 turtle.right(90); 10 } 11 void right() 12 { 13 turtle.right(90); 14 turtle.forward(1); 15 turtle.left(90); 16 } 17 void do

scikit-learn机器学习(二)逻辑回归进行二分类(垃圾邮件分类),二分类性能指标,画ROC曲线,计算acc,recall,presicion,f1

数据来自UCI机器学习仓库中的垃圾信息数据集 数据可从http://archive.ics.uci.edu/ml/datasets/sms+spam+collection下载 转成csv载入数据 import matplotlib matplotlib.rcParams['font.sans-serif']=[u'simHei'] matplotlib.rcParams['axes.unicode_minus']=False import pandas as pd import numpy as

D3画完整柱状图(带坐标轴、标签)

昨天晚上本来打算花一点时间把之前学的柱状图改一下,用CSV文件来替换自定义数据.这一替换可不得了,一晚上就搭进去了,还好今早找到了问题的所在,原因在于我的数据引用出了问题. 现在就来讲解一下如何画一个柱状图吧: 柱状图的画法和折线图其实很类似,只要掌握了比例尺的用法和坐标轴的画法,我们只要在此基础上添加“rect”元素添加矩形就可以了,但这其中也有一些要点,我会在其中标出,希望对你有用. 对于d3不同版本带来的代码不适用的解决办法:1).下载对应的v3或者v4版本加到代码引用里可以解决. 2).

用D3画简单的力导图

由于10月国庆后,换了新工作,需要做一些可视化的图表,所以在这里整理一下,其中的一部分,今天就先整理力导图. 如上图所以,要完成这么一个力导图,需要的步骤如下: var forceTree3 = function(setting) { var relations = setting.relations, links = setting.links, selector = setting.selector var nodes = {} // 上传到服务器需要修改 var pathUrl = '/'

d3 画简单的柱形图

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>testD3-3-drawingDivBar</title> <script type="text/javascript" src="http://localhost:8080/spring/js/d3.js"></script> &

d3 曲线区域填充

本篇以一个简单的demo示范一下在d3中实现曲线的区域填充. clip-path clip-path:创建一个只有元素的部分区域可以显示的剪切区域.显示clip-path内部的区域,而外部的区域不可见. 区域填充也主要以clip-path为基础来实现. 区域填充 1.1 先画一条曲线 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title&g

IOS用CGContextRef画各种图形(文字、圆、直线、弧线、矩形、扇形、椭圆、三角形、圆角矩形、贝塞尔曲线、图片)(转)

Graphics Context是图形上下文,可以将其理解为一块画布,我们可以在上面进行绘画操作,绘制完成后,将画布放到我们的view中显示即可,view看作是一个画框. 自己学习时实现的demo,希望对大家有帮助,具体的实现看代码,并有完美的注释解释,还有一些对我帮助的博文供大家参考.都在代码里面. 看一下demo效果图先: 自定义CustomView类,CustomView.h: [cpp]  view plain copy #import <UIKit/UIKit.h> #import