1. // d3中的比例尺也有定义域和值域,分别是domain和range,开发者需要指定domain和range的范围,如此即可以得到一个计算关系;
  2. // 线性比例尺:能将一个连续的区间映射到另一区间,要解决柱形图宽度的问题,就需要线性比例尺;
  3. // 如:
  4. var dataset = [1.2, 2.3, 0.9, 1.5, 3.3];
  5. var min = d3.min(dataset)
  6. var max = d3.max(dataset)
  7. var linear = d3.scale.linear()
  8. .domain([min,max])
  9. .range(0,300)
  10. linear(0.9) //0
  11. linear(2.3); //返回 175
  12. linear(3.3); //返回 300
  13. // 序数比例尺:定义域和值域不一定是连续的
  14. var index = [0, 1, 2, 3, 4];
  15. var color = ["red", "blue", "green", "yellow", "black"];
  16. // 我们希望 0 对应颜色 red,1 对应 blue,依次类推。
  17. var ordinal = d3.scale.ordinal()
  18. .domain(index)
  19. .range(color);
  20. ordinal(0); //返回 red
  21. ordinal(2); //返回 green
  22. ordinal(4); //返回 black

d3里的比例尺的更多相关文章

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

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

  2. D3比例尺

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

  3. D3.js 比例尺的使用

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

  4. D3.js 让图表动起来

    D3 支持制作动态的图表.有时候,图表的变化需要缓慢的发生,以便于让用户看清楚变化的过程,也能给用户不小的友好感. 一.什么是动态效果 绘制完成后不再发生变化的,这是静态的图表. 动态的图表,是指图表 ...

  5. svg操纵方案 基于 D3 还是 angular?

    之前还是想简单了, 现在重新写这篇.把逻辑拆分粒度的辨析,放到外面去. 问题提出:svg控制方案 基于 D3 还是 angular 根据这个,html 4种展现样式:普通的html,svg,2D ca ...

  6. 初识 D3.js :打造专属可视化

    一.前言 随着现在自定义可视化的需求日益增长,Highcharts.echarts等高度封装的可视化框架已经无法满足用户各种强定制性的可视化需求了,这个时候D3的无限定制的能力就脱颖而出. 如果想要通 ...

  7. d3.js读书笔记-2

    比例尺 比例尺基本内容 比例尺是一组把输入域映射为输出范围的函数.任意数据集中的值不可能恰好与图表中的像素尺度一一对应.比例尺就是把这些数据值映射为可视化图形中使用的新值的便捷手段.D3的比例尺就是那 ...

  8. D3.js 入门学习(一)

    一.安装D3.js 1.网络连接 <script src="https://d3js.org/d3.v4.min.js"></script> 2.命令行安装 ...

  9. d3.event=null

    d3功能奇多, 已经模块化,(其实感觉和react差不多了). 所以默认打包的单个文件 <script src="https://d3js.org/d3.v5.min.js" ...

随机推荐

  1. ENQUIRE the predecessor to the World Wide Web.

    看Building Responsive Data Visualization for the Web时介绍到了Enquire,表示wiki类系统实现了它的核心思想. 有点好奇是如何实现的,所以大概看 ...

  2. Codeforces.888G.Xor-MST(Borůvka算法求MST 贪心 Trie)

    题目链接 \(Description\) 有一张\(n\)个点的完全图,每个点的权值为\(a_i\),两个点之间的边权为\(a_i\ xor\ a_j\).求该图的最小生成树. \(n\leq2*10 ...

  3. BZOJ.2000.[HNOI2010]stone取石头游戏(博弈)

    BZOJ 洛谷 低估这道神题了_(:з」∠)_ MilkyWay好狠啊(小声) \(Description\) 有一些数字,被分成若干双端队列(从两边都可以取)和最多两个栈(只能从某一边一个一个取)的 ...

  4. python基础一 ------"有序"的字典

    "有序"字典:按照写入字典的先后顺序排序的字典(比list优点是按键查询) #-*-coding:utf-8 -*- #"有序"字典:按照写入字典的先后顺序排序 ...

  5. python基础一 -------如何在列表字典集合中根据条件筛选数据

    如何在列表字典集合中根据条件筛选数据 一:列表 先随机生成一个列表,过滤掉负数 1,普通for循环迭代判断 2,filter()函数判断,filter(函数,list|tuple|string) fi ...

  6. Dell Venue 8 Pro启动盘UEFI模式32位启动,备份系统

    进入微PE工具箱官方下载页面:http://www.wepe.com.cn/download.html,选择Win8PE 32位 V1.2版下载. 或者直接百度盘下载:https://pan.baid ...

  7. 3ds max学习笔记(十二)-- (弯曲:实例旋转楼梯)

    一般来讲,弯曲以不扭曲为原则: 新建一个圆柱体,在修改器列表中点击[弯曲]即可: 参数如下: 角度的正负表示的是方向的不同, 方向基本不更改,若要更改则90,-90: 限制:物体(或组)哪些受弯曲的影 ...

  8. Java中map集合系列原理剖析

    看了下JAVA里面有HashMap.Hashtable.HashSet三种hash集合的实现源码,这里总结下,理解错误的地方还望指正 HashMap和Hashtable的区别 HashSet和Hash ...

  9. Jmeter接口测试实例3-登录

    Jmeter实例3:登录 添加http协议—添加IP.路径.方法,察看结果树,运行 登录成功

  10. javascript parseUrl函数解析url获取网址url参数

    function parseURL(url) { var a = document.createElement('a'); a.href = url; return { source: url, pr ...