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} 第二个参考才是数据,但这在不同的环境可能 ...
随机推荐
- 性能测试工具Locust的介绍和使用
内容来自网络 https://www.w3xue.com/exp/article/20191/16707.html https://blog.csdn.net/qq_36255988/article/ ...
- depth深度
du.tree.find ls -li find ./ -inum 1193220 | while read a ;do rm -f $a;done find ./ -size 0b -type f ...
- docker运行nginx
docker run --name nginx(容器名) -p 80:80 -v 项目文件路径:/usr/share/nginx/html -v 配置文件路径:/etc/nginx/nginx.con ...
- BZOJ3510 首都
题目描述 在X星球上有N个国家,每个国家占据着X星球的一座城市.由于国家之间是敌对关系,所以不同国家的两个城市是不会有公路相连的. X星球上战乱频发,如果A国打败了B国,那么B国将永远从这个星球消失, ...
- 可变参数中size_t遇见的问题
在修改php扩展Trie时,出现了一个小bug PHP_FUNCTION(trie_filter_load) { Trie *trie; char *path; int path_len; if (z ...
- 40个迹象表明你还是PHP菜鸟
你是PHP菜鸟,如果你: 1. 不会利用如phpDoc这样的工具来恰当地注释你的代码2. 对优秀的集成开发环境如Zend Studio或Eclipse PDT视而不见3. 从未用过任何形式的版本控制系 ...
- 数组合并去重Array.from
function uniqArr(){ if(arguments.length == 0) return []; var arr = arguments[0]; for(var i=1;i<ar ...
- python 3 map函数用法
公式 f是定义的函数,l是你的list,所有功能都在f函数里完成, map(f,l) 有些网址爬虫出来的链接是一部分,省略了前端通用的,这时我们需要补充进去, 这时就用到了map函数,批量补充网址, ...
- window.load方法 （加载全部图片，第三方网站时使用）
$(window).load( function(){ console.lo ...
- php 图片上传 并返回上传文件位置 支持多文件上传
<?php /** * Created by PhpStorm. * User: DY040 * Date: 2018/4/26 * Time: 13:23 */ echo '<pre&g ...