D3基础---比例尺
转载请注明出处！
比例尺简述：
比例尺是一组把输入域映射到输出范围的函数。
一般来说数据集中的值不可能恰好与图表中的像素尺度一一对应。比例尺就是把这些数据值映射到可视化图形中使用的新值的便捷手段。
D3的比例尺就是那些你定义的带有参数的函数。
听到比例尺有些人就会想到最终图表中一系列的刻度线，对应一系列的值，不要搞错，这些刻度显示坐标轴的一部分，而坐标轴只是比例尺的一种形象的表示。比例尺实际上代表的是一种数学关系，不可能直接输出可见的图形。比例尺和坐标轴是两种不同但相关的东西。
下面我们只讨论线性比例尺。
值域和范围：
比例尺的输入值域（input domain）指的是可能的输入值的范围。
比例尺的输出范围（output range）指的是输出值的可能范围。
其实就是归一化，对于线性比例尺，d3可以帮助我们处理归一化过程的数学计算：输入值根据值域先进行归一化，然后再把归一化后的值对应到输出范围。
创建比例尺：
var scale = d3.scale.linear()
.domain([100, 500])
.range([10, 350]);
例如：
scale(100)输出是10，scale(300)输出是180…
缩放散点图：
var dataset = [
[5, 20], [480, 90], [250, 50], [100, 33], [330, 95],
[410, 12], [475, 44], [25, 67], [85, 21], [220, 88]
];
返回所有坐标中X值中最大的：
d3.max(dataset, function(d) { //返回 480
return d[0]; //每一个子数组中的第一个位置的值
});
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]);
设定圆心的坐标（注意使用和坐标同样缩放尺度的坐标值）：
.attr("cx", function(d) {
return d[0];
})
缩放后的坐标X值：
.attr("cx", function(d) {
return xScale(d[0]);
})
Y值同样如此：
.attr("cy", function(d) {
return d[1];
})
缩放后的坐标Y值：
.attr("cy", function(d) {
return yScale(d[1]);
})
设定文本坐标值（同上）：
.attr("x", function(d) {
return d[0];
})
.attr("y", function(d) {
return d[1];
})
变成:
.attr("x", function(d) {
return xScale(d[0]);
})
.attr("y", function(d) {
return yScale(d[1]);
})
源代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>testD3-10-scale.html</title>
<script type="text/javascript" src="d3.v3.js"></script>
<style type="text/css">
</style>
</head>
<body>
<script type="text/javascript">
//Width and height
var w = 500;
var h = 100;
var dataset = [
[5, 20], [480, 90], [250, 50], [100, 33], [330, 95],
[410, 12], [475, 44], [25, 67], [85, 21], [220, 88]
];
//Create scale functions
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]);
//Create SVG element
var svg = d3.select("body")
.append("svg")
.attr("width", w)
.attr("height", h);
svg.selectAll("circle")
.data(dataset)
.enter()
.append("circle")
.attr("cx", function(d) {
return xScale(d[0]);
})
.attr("cy", function(d) {
return yScale(d[1]);
})
.attr("r", function(d) {
return Math.sqrt(h - d[1]);
});
svg.selectAll("text")
.data(dataset)
.enter()
.append("text")
.text(function(d) {
return d[0] + "," + d[1];
})
.attr("x", function(d) {
return xScale(d[0]);
})
.attr("y", function(d) {
return yScale(d[1]);
})
.attr("font-family", "sans-serif")
.attr("font-size", "11px")
.attr("fill", "red");
</script>
</body>
</html>
修饰图表：
点大小与圈大小成正比，想把大的放在下面，只要改变Y轴值域倒转即可： .range([h , 0]);
有些圆形的边缘会被切掉一部分，为此引入一个边距变量：
var padding = 20;
以便在设置两个比例尺的时候加入边距，边距可以把圆形往里推，使他们远离SVG的四边，从而避免被切掉。
xScale的返回改为：.range([padding, w-padding]);
但右边的文本仍然会被切掉，可以增大边距2*padding。
原来我们是把每个圆形的半径设置为y值的平方根，现在，我们同样可以为半径设置一个比例尺：
var rScale = d3.scale.linear()
.domain([0, d3.max(dataset,function(d) {
return d[1];
})])
.rangeRound([2, 5]);
然后再这样设定圆的半径：
.attr("r", function(d) {
return rScale(d[1]);
});
这样所有远的半径就永远介于2~5之间。
其他方法：
nice():
告诉比例尺取得range()设置的任何值域，把两端的值扩展到最接近的整数。“For example, for a domain of [0.20147987687960267, 0.996679553296417], the nice domain is [0.2, 1].”
rangeRound():
代替range之后，比例尺输出的所有值都会舍入到最接近的整数值。对输出值取整有助于图形对应精确地像素值，避免边缘出现模糊不清的锯齿。
clamp():
默认情况下，比例尺可以返回指定范围之外的值。比如，假设给定的值位于输入值域之外，那么比例尺也会返回一个位于输出范围之外的值。调用clamp之后就会强行所有输出值都要在指定范围内。意味着超出范围，会取整到范围的最大值或最小值。
源代码微调：
<!DOCTYPE html>
<html lang="en">
<head>
<title>D3: Linear scales with a scatterplot</title>
<script type="text/javascript" src="../d3/d3.js"></script>
<style type="text/css">
/* No style rules here yet */
</style>
</head>
<body>
<script type="text/javascript">
var w = 500;
var h = 300;
var padding = 20;
var dataset = [
[5, 20], [480, 90], [250, 50], [100, 33], [330, 95],
[410, 12], [475, 44], [25, 67], [85, 21], [220, 88], [600, 150]
];
//create scales function
var xScale = d3.scale.linear()
.domain([0, d3.max(dataset,function
(d) {return d[0];})])
.rangeRound([padding,w-padding*2]);
var yScale = d3.scale.linear()
.domain([0, d3.max(dataset,function
(d) {return d[1];})])
.rangeRound([h-padding,padding]);
var rScale = d3.scale.linear()
.domain([0, d3.max(dataset,function
(d) {return d[1];})])
.rangeRound([2, 5]);
//create SVG element
var svg = d3.select("body")
.append("svg")
.attr("width", w)
.attr("height", h);
//create circles
svg.selectAll("circle")
.data(dataset)
.enter()
.append("circle")
.attr("cx", function(d) {
return xScale(d[0]);
})
.attr("cy", function(d) {
return yScale(d[1]);
})
.attr("r", function(d) {
return rScale(d[1]);
});
//create text elements
svg.selectAll("text")
.data(dataset)
.enter()
.append("text")
.text(function(d){
return d[0] + "," + d[1];
})
.attr("x", function(d) {
return xScale(d[0]);
})
.attr("y", function(d) {
return yScale(d[1]);
})
.attr("font-family", "sans-serif")
.attr("font-size", "11px")
.attr("fill", "red");
</script>
</body>
</html>
效果图：
For my lover, CC!
参考书籍：《数据可视化实战》
D3基础---比例尺的更多相关文章
- 数据可视化(7)--D3基础
一直想写写D3,觉得D3真心比较强大,基本上你能想出来的图表都能绘制出来,只不过使用起来比前几个要稍麻烦一点. 正好最近读完了<数据可视化实战>,将关于D3的知识梳理了一遍,写这篇博客记录 ...
- D3.js比例尺 定量比例尺 之 线性比例尺(v3版本)
定量比例尺 : 数学上有函数的概念,不是编程中所说的函数,如线性函数.指数函数.对数函数等,而指的是一个量随着另一个量的变化而变化.例如有一下线性函数 : y=2x+1该函数在二维坐标系中绘制出来的图 ...
- D3.js 比例尺的使用
比例尺是 D3 中很重要的一个概念,直接用数值的大小来代表像素不是一种好方法 一.为什么需要比例尺 制作一个柱形图,会有一个数组:var dataset = [ 250 , 210 , 170 , 1 ...
- D3基础--数轴
转载请注明出处! 概述: 与比例尺类似,D3的数轴实际上也使用来定义参数的函数.但与比例尺不同的是,调用数轴函数并不会返回值,而是会生成数轴相关的可见元素.包括:轴线,标签和刻度. 但是要注意数轴函数 ...
- D3.js比例尺 序数比例尺(v3版本)
上一章介绍了阈值比例尺:https://www.cnblogs.com/littleSpill/p/10825038.html.到目前所有的定量比例尺已经介绍完了. 现在给大家介绍一下序数比例尺. 定 ...
- D3基础---简介和数据
D3.js是一种数据操作类型的javascript库(也可视其为插件):结合HTML,SVG和CSS,D3可以图形化的,生动的展现数据. d3获取:http://d3js.org/ 在代码文件中引入D ...
- d3基础图形模板笔记
散点图(scatter plot): http://bl.ocks.org/weiglemc/6185069 雷达图(radar): http://xgfe.github.io/uploads/che ...
- d3基础入门一-选集、数据绑定等核心概念
引入D3 D3下载,本文下载时的版本为6.5.0 mkdir d3.6.5.0 unzip --help unzip d3.zip -d d3.6.5.0/ ls d3.6.5.0/ API.md C ...
- D3基础入门四-事件处理
6.5.0版 .on("mouseover", function(e,d) e: {"isTrusted":true} 第二个参考才是数据,但这在不同的环境可能 ...
随机推荐
- 高性能无锁队列 Disruptor 初体验
原文地址: haifeiWu和他朋友们的博客 博客地址:www.hchstudio.cn 欢迎转载,转载请注明作者及出处,谢谢! 最近一直在研究队列的一些问题,今天楼主要分享一个高性能的队列 Disr ...
- orcal 锁表
--查询Oracle正在执行的sql语句及执行该语句的用户 SELECT b.sid oracleID, b.username 登录Oracle用户名, b.serial#, spid 操作系统ID, ...
- [Perl]通过GD模块获取字符/汉字的点阵
原来Perl获取汉字的点阵如此简单 示例脚本应保存为utf8格式 Code: [全选] [展开/收缩] [Download] (Untitled.pl) use GD; use utf8; my $g ...
- JavaScript 实现用户点击图片放大
JavaScript 实现用户点击图片放大 一.契机 情况是这样的,之前推荐朋友去建站.后面他专门写了一篇文章说如何实现 "用户点击图片实现放大效果",俺就好好 "拜读& ...
- jxl获取excel中的合并的单元格(主要是方法介绍)
Range[] rangeCells = sheet.getMergedCells();// 返回sheet中合并的单元格数组 for (Range r : rangeCells) {//对数组遍历拿 ...
- php中模拟post，get请求和接受请求详细讲解
在php中我们经常用到curl拓展来进行模拟post.get请求,下面就来具体说说怎么模拟: 一.首先模拟post请求: function http_post_data($url, $query_da ...
- Java传参都是传引用变量的副本
最近做练习时碰到一个问题,Java到底是怎样传参的,经过查资料与实验,我发现Java传参都是传引用变量的副本值. 1 Java中的引用变量 1.1 字面值引用变量:即基本数据类型的引用变量 ,如 in ...
- 洛谷 P4248 / loj 2377 [AHOI2013] 差异 题解【后缀自动机】【树形DP】
可能是一个 SAM 常用技巧?感觉 SAM 的基础题好多啊.. 题目描述 给定一个长度为 \(n\) 的字符串 \(S\) ,令 \(T_i\) 表示它从第 \(i\) 个字符开始的后缀,求: \[ ...
- js面向对象（一）——封装
想写这个好久了,自己当时理解这个确实费了一番功夫,现在记录一下,哪怕对读者有一点点帮助,我也很开心,看着不爽大胆喷吧,我脸皮可厚了,闲话不说了,进入正题 ----------------------- ...
- es与hive整合
在hive classpath中添加elasticsearch-hadoop.jar,以下方法任一种均可: 1.启动hiveserver2 前,在hive-site.xml文件中更改hive.aux. ...