D3——scale

d3.scale 比例尺

“Scales are functions that map from an input domain to an output range”

Domains 定义域 和 Ranges 值域

创建线性比例尺

var scale = d3.scale.linear()
                    .domain([100, 500])
                    .range([10, 350]);
scale(100);  //Returns 10
scale(300);  //Returns 180
scale(500);  //Returns 350
scale(200);    //Returns 95
scale(450.5);   //Returns 307.925
scale(-100);    //Returns -160

d3.max()和d3.min()

var dataset = [
                [5, 20], [480, 90], [250, 50], [100, 33], [330, 95],
                [410, 12], [475, 44], [25, 67], [85, 21], [220, 88]
              ];
d3.max(dataset);  // Returns [85, 21].  What???
d3.max(dataset, function(d) {
    return d[0];   //Returns 480 ; References first value in each subarray
});

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

设置动态比例尺

//width and heightvar w=500;var h= 100;//x轴比例尺
var xScale = d3.scale.linear()
                     .domain([0, d3.max(dataset, function(d) { return d[0]; })])
                     .range([0, w]);

//y轴比例尺
var yScale = d3.scale.linear()
                     .domain([0, d3.max(dataset, function(d) { return d[1]; })])
                     .range([0, h]);

设置圆心和label,根据比例尺缩放值

//改变散点图中设置circle和label的方法
//设置圆的中心点
.attr("cx", function(d) {
    return xScale(d[0]);  //Returns scaled value
})
.attr("cy", function(d) {
    return yScale(d[1]);
})

//设置text label的位置
.attr("x", function(d) {
    return xScale(d[0]);
})
.attr("y", function(d) {
    return yScale(d[1]);
})

Refining the Plot

.range([h, 0]);

有些元素无法完全显示,被切断了,设置一个padding

var padding = 20;

//xScale由range([0,w]),改为如下
.range([padding, w - padding]);

//yScale由range([h, 0]),改为如下
.range([h - padding, padding]);

//double padding
.range([padding, w - padding * 2]);

其他方法:

d3.scale.linear().nice() - 扩展比例尺的定义域为一个优化的定义域

d3.scale.linear().rangeRound() - 设置比例尺的输出范围,并四舍五入

d3.scale.linear().clamp() - 启用或者关闭值域的闭合。

其他比例尺:

identity - 线性恒等比例尺

sqrt - 平方根比例尺

pow - 指数比例尺

log - 对数比例尺

quantize - 量化比例尺(值域离散)

quantile - 分位数比例尺

ordinal - 序数比例尺

threshold - 临界值比例尺(值域离散)

d3.scale.category10() - 构造一个10种颜色的序数比例尺。

d3.scale.category20() - 构造一个20种颜色的序数比例尺。

d3.scale.category20b() - 构造一个20种颜色的序数比例尺。

d3.scale.category20c() - 构造一个10种颜色的序数比例尺。

d3.time.scale()

时间: 2024-10-18 17:40:57

D3——scale的相关文章

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)

[D3] 6. Color Scale

<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <script src="../bower_components/underscore/underscore-min.js"></script> <script src="../v

【 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 中保存的是数组

[4] D3.js中使用scale(比例)

本人的个人博客为: www.ourd3js.com csdn博客为: blog.csdn.net/lzhlzz 转载请注明出处,谢谢. 在上一节中使用了一个很重要的概念 - scale (这个不知道翻译成什么,暂且叫它比例).本节将重点介绍它的相关使用方法. 在介绍 scale 之前,先介绍两个经常和 scale 一起出现的函数,在上一节中也出现了. d3.max() d3.min() 它们用于求一个数组中的最大值和最小值,如果是一维数组,使用方法如下: var dataset = [ 30,

d3 API scale

1.d3.scale.category10() var colors = d3.scale.category10(); for (var i = 9; i >= 0; i--) { console.log(i+':'+colors(10-i)); } 注意:colors.length = 1; colors(key),key是什么不重要,顺序很重要. 2..range() 取值:.range([]) 赋值 3.rangePoints() rangeRoundPoints() 有点复杂,不常用 关

d3.js学习

画svg图像 1.添加svg元素 2.添加g元素,g元素是一个分组的元素,相当于html中的div元素 3.画图像 4.画坐标轴 ----------------------------------------------------------------------------- d3画闲线性曲线例子 html: <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8&

d3系列2--api攻坚战02

<html> <head> <style type="text/css"> .area{ fill:steelblue; } </style> <title></title> </head> <body> <script src="js/d3.v3.min.js" type="text/javascript" charset="utf-

D3制作基础图表学习总结(part1)

一.基本的环境搭建(和使用其他框架或js库一样) 1.建立一个工程: 2.在html文件中引入D3的文件: 附上git地址:https://github.com/d3/d3/wiki  二.建立图表 1.线性图表: 画线条的思路(下面代码都在js文件中编写,并在htm文件中引入自己写的该js文件): 1)设置存放曲线的位置 给html文件中的container容器添加节点svg,并为svg节点设置宽.高. 在svg节点中添加一个g节点(存放线条)并设置其位置(用了css3中的位移属性). 2)画

AngularJS in Action读书笔记5(实战篇)——在directive中引入D3饼状图显示

前言: "宁肯像种子一样等待  也不愿像疲惫的陀螺  旋转得那样勉强" 这是前几天在查资料无意间看到的一位园友的签名,看完后又读了两遍,觉得很有味道.后来一寻根究底才知这是出资大诗人汪国真之口,出处<她>.且抛开上下文,单从这短短几句,正恰如其分的折射出有一群人,他们穿着不那么fashion,言辞不那么犀利,但是内心某一块地方像是躁动的火山,拥有无尽的动力和激情,矢志不渝种子般投身到技术研究和心得分享当中. 或许每一次的生长都是那么悄无声息,但是无数次的坚持只是为了破土那日