线性比例尺
指数比例尺
对数比例尺
量子比例尺
分位比例尺
阈值比例尺
<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>D3</title>
</head>
<body style="background-color: #ffffff;">
</body>
<script src="d3.v3.min.js" charset="UTF-8"></script>
<script>
var linear = d3.scale.linear()
.domain([0, 500])
.range([0, 100]);
console.log(linear(50));
console.log(linear(250));
console.log(linear(450));
console.log(linear.invert(90));
console.log(linear.domain());
console.log(linear.range());
var pow = d3.scale.pow().exponent(3);
console.log(pow(2));
console.log(pow(3));
var quantize = d3.scale.quantize()
.domain([50, 0])
.range(['#888', '#666', '#444', '#222', '#000']);
var r = [45, 35, 25, 15, 5];
var svg = d3.select("body").append("svg")
.attr("width", 400)
.attr("height", 400);
svg.selectAll("circle")
.data(r)
.enter()
.append("circle")
.attr("cx", function(d, i) {
return 50 + i * 30;
})
.attr("cy", 50)
.attr("r", function(d) {
return d;
})
.attr("fill", function(d) {
return quantize(d);
});
var threshold = d3.scale.threshold()
.domain([10, 20, 30])
.range(['red', 'green', 'blue', 'black']);
console.log(threshold(5));
console.log(threshold(35));
</script>