【D3.V3.js系列课程】-（十二）坐标尺度-JavaSript-爱易网页

【D3.V3.js系列课程】-（十二）坐标尺度

日期：2014-05-16　浏览次数：20318 次

【D3.V3.js系列教程】--（十二）坐标尺度

1、多种类型的缩放尺度

Quantitative Scales
Linear Scales
Identity Scales
Power Scales

可以参考https://github.com/mbostock/d3/wiki/Quantitative-Scales

我们一般采用线性缩放

2、定义域和值域

定义域范围domain([100, 500])

值域范围.range([10, 350])

var scale = d3.scale.linear()
                    .domain([100, 500])
                    .range([10, 350]);

3、坐标轴的缩放

返回所有坐标中X值最大的X

d3.max(dataset, function(d) {    //Returns 480
    return d[0];  //References first value in each sub-array
});

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]);

4、设定圆心的坐标（注意使用和坐标同样缩放尺度的坐标值）

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

缩放后的坐标X值

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

Y值同样如此：

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

修改后就是:

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

5、设定文本坐标值（同上）

.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]);
})

6、源码

<!DOCTYPE html>
<html>
  <head>
		<meta charset="utf-8">
		<title>testD3-10-scale.html</title>
		<script type="text/javascript" src="http://localhost:8080/spring/js/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]

免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。