d3.js——比例尺的使用

在学习d3.js的时候，发现有个函数报错

var linear = d3.scale.linear()

控制台显示找不到linear()

百度后知道这是新版d3(v4)和旧版的d3(v3)的原因

新版d3.js  线性比例尺：

var linear = d3.scaleLinear();

 线性比例尺的代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>scale</title>
</head>
<body>
<script src="d3.js"></script>
<script>
    var dataset = [1.2, 2.3, 0.9, 1.5, 3.3];
    var min = d3.min(dataset);
    var max = d3.max(dataset);
    //domain() 和 range() 分别设定比例尺的定义域和值域
    var linear = d3.scaleLinear()
        .domain([min, max])
        .range([0, 300]);

    console.log(linear(0.9));    //返回 0
    console.log(linear(2.3));    //返回 175
    console.log(linear(3.3));    //返回 300
</script>
</body>
</html>

这个d3.js的教程来源：http://d3.decembercafe.org/pages/lessons/6.html

同理：序数比例尺

新版：

var ordinal = d3.scaleOrdinal()

旧版：

var ordinal = d3.scale.ordinal()

 

posted @ 2017-08-01 16:32  未央oo  阅读(309)  评论(0)    收藏  举报