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} 第二个参考才是数据,但这在不同的环境可能 ...
随机推荐
- [AGC003F] Fraction of Fractal 矩阵快速幂
Description SnukeSnuke从他的母亲那里得到了生日礼物--一个网格.网格有HH行WW列.每个单元格都是黑色或白色.所有黑色单元格都是四联通的,也就是说,只做水平或垂直移动且只经过 ...
- PHP如何根据数组中的键值进行排序
主要是使用PHP的排序函数,asort()和arsort(). 为了减少代码的耦合性,我们将根据数组中的键值进行排序封装成一个函数 <?php $array = array( array(), ...
- [Swift]堆栈Stack的两种版本：(1)用类包装Stack (2)用泛型包装Stack
堆栈是一个在计算机科学中经常使用的抽象数据类型.堆栈中的物体具有一个特性: 最后一个放入堆栈中的物体总是被最先拿出来, 这个特性通常称为后进先出(LIFO)队列. 堆栈中定义了一些操作. 两个最重要的 ...
- redis 3.0 集群__配置文件详解（常用配置）
参考文档 http://www.cnblogs.com/huangjacky/p/3700473.html http://www.cnblogs.com/cxd4321/archive/2012/12 ...
- docker安装mysql57
提升应用交付效率 1. 支持服务发现,避免服务重启迁移 IP 变更带来影响:2. 支持微服务化,降低代码维护及重构复杂度,适应快速变化的业务需求. 快速响应业务变化 1. 灵活水平扩展,应对业务量的骤 ...
- 编译图像质量分析库iqa
介绍 iqa库是我在GitHub上偶然发现的一个具有MSE, PSNR, SSIM, MS-SSIM等图像质量分析算法的库,觉得还不错,就把它下载下来编译,编译后生成静态的库.以下是我总结的编译方 ...
- POJ3076 Sudoku
POJ3076 Sudoku 本题为16*16宫格 剪枝见代码 #include <cstdio> #include <iostream> #include <algor ...
- weex 编译vue成js
cd 项目 1.开发 npm run web 开发过程中可以直接使用浏览器运行 npm run ios 2.打包 npm run build 会在 dist 文件夹 中生成js文件, 即可拖入ios ...
- MYSQL ERROR 1049 (42000): Unknown database
https://www.cnblogs.com/hedgehog105/p/10196566.html lower_case_table_names=2
- C#集合之不变的集合
如果对象可以改变其状态,就很难在多个同时运行的任务中使用.这些集合必须同步.如果对象不能改变器状态,就很容易在多个线程中使用. Microsoft提供了一个新的集合库:Microsoft Immuta ...