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

時間 2019-11-12

標籤 D3.V3.js系列教程十二座標尺度欄目 JavaScript 简体版

原文原文鏈接

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

一、多種類型的縮放尺度

Quantitative Scales
Linear Scales
Identity Scales
Power Scalesjavascript

能夠參考https://github.com/mbostock/d3/wiki/Quantitative-Scalescss

咱們通常採用線性縮放html

二、定義域和值域

定義域範圍domain([100, 500])java

值域範圍.range([10, 350])git

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

三、座標軸的縮放

返回全部座標中X值最大的Xgithub

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

X軸縮放spring

var xScale = d3.scale.linear()
                     .domain([0, d3.max(dataset, function(d) { return d[0]; })])
                     .range([0, w]);

Y軸縮放app

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值dom

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

Y值一樣如此：ide

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

修改後就是:

.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="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], [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]);

注：爲了SVG邊緣不被截斷能夠設置邊距： .range([h - padding, padding]);

注：自定義半徑：

var rScale = d3.scale.linear()
                     .domain([0, d3.max(dataset, function(d) { return d[1]; })])
                     .range([2, 5]);

而後，這樣設置半徑

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

注：將點變得更緊湊些，設置最大的座標範圍：,
[600, 150]

注：SVG的縱向仍是很擁擠，調整SVG縱座標：

注：其餘方法和縮放尺度：

Other Methods

d3.scale.linear() has several other handy methods that deserve a brief mention here:

nice() — This tells the scale to take whatever input domain that you gave torange() and expand both ends to the nearest round value. From the D3 wiki: 「For example, for a domain of [0.20147987687960267, 0.996679553296417], the nice domain is [0.2, 1].」 This is useful for normal people, who find it hard to read numbers like 0.20147987687960267.
rangeRound() — Use rangeRound() in place of range() and all values output by the scale will be rounded to the nearest whole number. This is useful if you want shapes to have exact pixel values, to avoid the fuzzy edges that may arise with antialiasing.
clamp() — By default, a linear scale can return values outside of the specified range. For example, if given a value outside of its expected input domain, a scale will return a number also outside of the output range. Calling .clamp(true) on a scale, however, forces all output values to be within the specified range. Meaning, excessive values will be rounded to the range’s low or high value (whichever is nearest).

Other Scales

In addition to linear scales (discussed above), D3 has several other scale methods built-in:

identity — A 1:1 scale, useful primarily for pixel values
sqrt — A square root scale
pow — A power scale (good for the gym)
log — A logarithmic scale
quantize — A linear scale with discrete values for its output range, for when you want to sort data into 「buckets」
quantile — Similar to above, but with discrete values for its input domain (when you already have 「buckets」)
ordinal— Ordinal scales use non-quantitative values (like category names) for output; perfect for comparing apples and oranges

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。