.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. 解决TS报错Property 'style' does not exist on type 'Element'

    在使用queryselector获取一个dom元素,编译时却报错说property 'style' does not exist on type 'element'. 原因:这是typescript的 ...

  2. 二叉树、二叉搜索树、平衡二叉树、B树、B+树的精确定义和区别探究

    概述 关于树的概念很多,B树,B+树,红黑树等等. 但是你去翻翻百度百科,或者用百度或者谷歌搜索一下中文的树结构的介绍,全都是狗屁.没有哪个中文网站是真正精确解释树的定义的,尤其是百度百科. 下面我要 ...

  3. c++文件偏移

    #include <iostream> #include <fstream> #include <cassert> using namespace std; int ...

  4. 【转】MFC编辑框自动换行,垂直滚动条自动下移

    1.新建一个编辑框控件(Edit Control),将其多行(Multiline)前面打勾(属性设置为True),Auto HScroll前面的勾去掉(属性设置False),这样就可以实现每一行填满后 ...

  5. angular4使用代理

    1. 在angular-cli项目根目录下创建proxy.config.json { "/api/v1": { "target": "http://1 ...

  6. Jsoup -- 网络爬虫解析器

    需要下载jsoup-1.8.1.jar包 jsoup 是一款Java 的HTML解析器,可直接解析某个URL地址.HTML文本内容.它提供了一套非常省力的API,可通过DOM,CSS以及类似于jQue ...

  7. 跟踪路由 tracert

    由于最近遇到网络出现故障的问题,便使用到Tracert来确定了下出现故障的网络节点 记录下tracert命令相关内容 1. 简介 2. Tracert工作原理... 3. 常用参数 4. 使用示例与输 ...

  8. Java-basic-2-

    接口只定义派生要用到的方法,但是方法的具体实现完全取决于派生类. 如果一个类定义在某个包中,那么package语句应该在源文件的首行. 如果源文件包含import语句,那么应该放在package语句和 ...

  9. 命令行执行Qt程序

    原文网址 //helloworld.cpp #include <QApplication> #include <QPushButton> int main(int argc,c ...

  10. linux学习-systemd-journald.service 简介

    过去只有 rsyslogd 的年代中,由于 rsyslogd 必须要开机完成并且执行了 rsyslogd 这个 daemon 之 后,登录文件才会开始记录.所以,核心还得要自己产生一个 klogd 的 ...