.domain([, ]) 定义域范围
.range([, ]) 值域范围
var scale = d3.scale.linear()
.domain([, ])
.range([, ]);

将100-500的范围映射到10-350范围当中

d3.max(dataset,function(d){return d[]});

返回最大的x轴

var xScale = d3.scale.linear()
.domain([, d3.max(dataset, function(d) { return d[]; })])
.range([, w]);
var yScale = d3.scale.linear()
.domain([, d3.max(dataset, function(d) { return d[]; })])
.range([, h]);

分别生成xScale和yScale缩放函数

.attr("cx", function(d) {
return d[];
})

根据d的数据返回坐标

.attr("cx", function(d) {
return xScale(d[]);
})

将x坐标经过xScale的缩放后返回

d3 比例尺的更多相关文章

  1. D3比例尺

    D3中有个重要的概念就是比例尺.比例尺就是把一组输入域映射到输出域的函数.映射就是两个数据集之间元素相互对应的关系.比如输入是1,输出是100,输入是5,输出是10000,那么这其中的映射关系就是你所 ...

  2. D3.js使用过程中的常见问题(D3版本D3V4)

    目录 一.学习D3我必须要学习好SVG矢量图码? 二.如何理解D3给Dom节点绑定数据时的Update.Enter和Exit模式 三.D3绑定数据时用datum与data有什么不一样? 四.SVG图中 ...

  3. 百度数据可视化图表套件echart实战

    最近我一直在做数据可视化的前端工作,我用的最多的绘图工具是d3.d3有点像photoshop,功能很强大,例子也很多,但是学习成本也不低,做项目是需要较大人力投入的.3月底由在亚马逊工作的同学介绍下使 ...

  4. 精通D3.js学习笔记(2)比例尺和坐标

    1.线性比例尺 d3.scale.linear()   创建一个线性比例尺           .domain([0,500]) 定义域           .range([0,1000]) 值域 l ...

  5. D3.js 比例尺的使用

    比例尺是 D3 中很重要的一个概念,直接用数值的大小来代表像素不是一种好方法 一.为什么需要比例尺 制作一个柱形图,会有一个数组:var dataset = [ 250 , 210 , 170 , 1 ...

  6. 【 D3.js 入门系列 — 4 】 如何使用比例尺( scale )

    上一章中使用了一个很重要的概念 — 比例尺( scale ),本节将解说其使用方法. 1. 最大值和最小值 在介绍比例尺( scale )之前,先介绍两个经常和比例尺一起出现的函数,在[第3章]中也出 ...

  7. d3里的比例尺

    // d3中的比例尺也有定义域和值域,分别是domain和range,开发者需要指定domain和range的范围,如此即可以得到一个计算关系: // 线性比例尺:能将一个连续的区间映射到另一区间,要 ...

  8. D3基础---比例尺

    转载请注明出处! 比例尺简述: 比例尺是一组把输入域映射到输出范围的函数. 一般来说数据集中的值不可能恰好与图表中的像素尺度一一对应.比例尺就是把这些数据值映射到可视化图形中使用的新值的便捷手段. D ...

  9. D3.js系列——比例尺和坐标轴

    比例尺是 D3 中很重要的一个概念.绘制图形时直接用数值的大小来代表像素不是一种好方法,本章正是要解决此问题. 一.为什么需要比例尺 上一章制作了一个柱形图,当时有一个数组,绘图时,直接使用 250 ...

随机推荐

  1. superset docker 部署

    公众号原文有更多效果图哦 一.使用自己的数据库 1. 拉取项目 // 创建目录用于存放项目 mkdir -p /mnt/superset cd /mnt/superset git clone http ...

  2. linux ecrypt decrypt

    reference ecrypt vickey | openssl enc -aes-256-cbc -a -salt -pass pass:wu decrypt echo U2FsdGVkX1+Hn ...

  3. JQuery EasyUI学习记录(一)

    1.主页设计(JQuery EasyUI插件) 下载easyUI开发包: 将easyUI资源文件导入页面中: <link rel="stylesheet" type=&quo ...

  4. 巧用 Odoo act_window 的 flags实现一些个性化的视图控制

    转自:http://www.khcloud.net:4082/?thread-58.htm 'flags': { 'sidebar': False, //是否显示sidebar区域(主要为action ...

  5. python @staticmethod和@classmethod

    Python其实有3个方法,即 静态方法 (staticmethod), 类方法 (classmethod)和 实例方法. 如下: def foo(x): print "executing ...

  6. NOIP2016——大家一起实现の物语

    由于最近硬盘挂了,换了个固态硬盘,比赛结束后四天一直在装Linux,所以最近一直没怎么更新 看起来挺漂亮的 比赛前一个月申请停了一个月晚自习,在我们这座城市里能做到这种事情已经可以被称为奇迹了,并且在 ...

  7. 01windows常用命令及批处理

    1. 概述 复制内容:右键弹出快捷菜单,选择"标记(K)",然后选中所需要的内容,然后右键即可 粘贴内容:右键弹出快捷菜单,选择"粘贴(P)" 命令参数的路径: ...

  8. Linux菜鸟起飞之路【十】进程管理

    一.基本概念 进程:程序的一次动态执行 守护进程:在后台运行并提供系统服务的进程 僵尸进程:完成了生命周期但却依然留在进程表中的进程,我们称之为 “僵尸进程” 父进程:指已创建一个或多个子进程的进程. ...

  9. 《linux设备驱动开发详解》笔记——12linux设备驱动的软件架构思想

    本章重点讲解思想.思想.思想. 12.1 linux驱动的软件架构 下述三种思想,在linux的spi.iic.usb等复杂驱动里广泛使用.后面几节分别对这些思想进行详细说明. 思想1:驱动与设备分离 ...

  10. matplotlib学习记录 六

    # 绘制多数据条形图 # 假设你知道了列表a中电影分别在2017-09-14(b_14),2017-09-15(b_15), # 2017-09-16(b_16)三天的票房,为了展示列表中电影本身的票 ...