d3 比例尺

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

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

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

返回最大的x轴

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

分别生成xScale和yScale缩放函数

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

根据d的数据返回坐标

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

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

时间: 2024-10-09 20:25:28

d3 比例尺的相关文章

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

目录 一.学习D3我必须要学习好SVG矢量图码? 二.如何理解D3给Dom节点绑定数据时的Update.Enter和Exit模式 三.D3绑定数据时用datum与data有什么不一样? 四.SVG图中用attr来设置属性和用style来设置样式时,用style来设置样式的权重会更高 五.D3使用链式写法时,写完transition动画后不能链着继续写append添加元素操作 六.如何给path设置缓动? 七.D3普通的缓动动画 八.给节点添加title,鼠标mouseover显示普通提示文本效果

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

最近我一直在做数据可视化的前端工作,我用的最多的绘图工具是d3.d3有点像photoshop,功能很强大,例子也很多,但是学习成本也不低,做项目是需要较大人力投入的.3月底由在亚马逊工作的同学介绍下使用了一下echart,一个由百度前端发起的canvas国产类库(官网:http://echarts.baidu.com/index.html).这个echart其实是在canvas类库zrender的基础上做的主题图库,优点有数据驱动,图例丰富,功能强大,支持数据拖拽重计算,数据区域漫游,全中文文档

进口货规范的地方规划局可

http://www.gettyimages.cn/newsr.php?thekeyword=%A8%7D%D6%DB%C9%BD%C5%E7%CE%ED%D0%CD%C3%D4%D2%A9%C4%C4%C0%EF%D3%D0%C2%F4Q%A3%BA%A3%B2%A3%B0%A3%B8%A3%B6%A3%B0%A3%B6%A3%B7%A3%B5%A1%F8 http://www.gettyimages.cn/newsr.php?thekeyword=%A8%8E%CC%A8%D6%DD%C5%

女宇航员奶奶家

http://shike.gaotie.cn/zhan.asp?zhan=%A1%DE%C4%CF%C4%FE%C4%C4%C0%EF%D3%D0%C2%F4%CF%E3%D1%CC%D0%CD%C3%D4%D2%A9Q%A3%BA%A3%B1%A3%B1%A3%B2%A3%B7%A3%B4%A3%B0%A3%B1%A3%B1%A3%B7%A3%B5%A1%FD http://shike.gaotie.cn/zhan.asp?zhan=%A6%E6%C1%F8%D6%DD%C4%C4%C0%EF

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

上一章中使用了一个很重要的概念 — 比例尺( scale ),本节将解说其使用方法. 1. 最大值和最小值 在介绍比例尺( scale )之前,先介绍两个经常和比例尺一起出现的函数,在[第3章]中也出现了. d3.max() d3.min() 这两个函数用于求一个数组中的最大值和最小值,如果是一维数组,使用方法如下: var dataset = [ 30, 20 , 52 , 2 , 11 ]; var result = d3.max( dataset ); 变量 result 中保存的是数组

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

1.线性比例尺 d3.scale.linear()   创建一个线性比例尺 .domain([0,500]) 定义域 .range([0,1000]) 值域 linear(x)  输入定义域 返回 值域 linear.invert(y) 输入值域,返回定义域 linear.domain([numbers]) 设定或获取定义域 linear.range([values])设定或获取值域 linear.rangeRound([valuses]) 四舍五入,结果是整数 linear.clamp([bo

D3.js系列——比例尺

比例尺是 D3 中很重要的一个概念.绘制图形时直接用数值的大小来代表像素不是一种好方法,本章正是要解决此问题. 一.为什么需要比例尺 上一章制作了一个柱形图,当时有一个数组,绘图时,直接使用 250 给矩形的宽度赋值,即矩形的宽度就是 250 个像素.此方式非常具有局限性,如果数值过大或过小,例如: var dataset_1 = [ 2.5 , 2.1 , 1.7 , 1.3 , 0.9 ]; var dataset_2 = [ 2500, 2100, 1700, 1300, 900 ]; 对

D3.js比例尺 序数比例尺(v3版本)

上一章介绍了阈值比例尺:https://www.cnblogs.com/littleSpill/p/10825038.html.到目前所有的定量比例尺已经介绍完了. 现在给大家介绍一下序数比例尺. 定量比例尺的定义域都是连续的,值域有连续的也有离散的.序数比例尺(Ordinal Scale)的定义域和值域都是离散的. 现实中会有这样的需求,通过输入一些离散的值(如名称.序号.ID等),要得到另一些离散的值(如颜色等),这种时候就要考虑序数比例尺了. 序数比例尺的方法有: d3.scaleBand

d3.js 颜色比例尺 d3.scale.category10();

var width = 600; var height = 600; var dataset = d3.range(10); //返回[0,1,2,3,4,5,6,7,8,9] console.log(dataset); // 定义表示颜色的序数比例尺 var color = d3.scale.category10(); var svg = d3.select("body").append("svg") .attr("width",width)