D3.js中比例尺的使用

最新推荐文章于 2021-09-22 00:40:41 发布

中古骑士1992

最新推荐文章于 2021-09-22 00:40:41 发布

阅读量605

点赞数

分类专栏： D3.js

本文链接：https://blog.csdn.net/u011436736/article/details/79431990

版权

D3.js 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

1.为什么要使用比例尺
将某一区域映射到另外一个区域，其大小关系不变
2.有哪些比例尺

D3中的比例尺，很像数学中的函数
给定一个x（定义域）。 也就确定了一个y（值域）。
D3中称为domain和range。
我们在使用时，需要给定domain和range的范围，便得到了一个映射关系

线性比利尺

将一个连续的区间，映射到另外一个区间
假设有如下数组
var dataset = [1.2, 2.3, 0.9, 1.5, 3.3];
要求：将最小的映射为0，最大的映射为300

var min=d3.min(dataset);
var max=d3.max(dataset);
var linear=d3.scale.linear()
    .domain([min,max])
    .range([0,300])
console.log(linear(0.9))   //0
console.log(linear(3.3))   //300

d3.scale.linear() 的返回值，是可以当做函数来使用的。因此，才有这样的用法：linear(0.9)。

序数比例尺
有时候domain和range不是连续的
例如：

var index=[0,1,2,3,4];
var color=["red","blue","green","yellow","black"]

我们希望0对应的就是red，1对应的就是blue，依次类推
这时候就需要用到序数比例尺


var ordinal=d3.scale.ordinal()
        .domain(index)
        .range(color);

ordinal(0)  //red
ordinal(4)  //black

3.给柱形图添加比例尺

    <html>

<head>
    <meta charset="utf-8">
    <title>hello world</title>
</head>

<body>
    <p>Apple</p>
    <p>pear</p>
    <p>banana</p>
    <script src="http://d3js.org/d3.v3.min.js"></script>
    <script>
        var height = "300";
        var width = "300";

        var dataset = [2.5, 2.1, 1.7, 1.3, 0.9];
        //定义比例尺
        var linear =d3.scale.linear()
                    .domain([0,d3.max(dataset)])  //这里一定注意范围是个数组
                    .range([0,300]);              //这里一定注意范围是个数组


        var rectHeight=25;
        var svg=d3.select("body").append("svg")
                .attr("height",height)
                .attr("width",width)
        svg.selectAll("rect")      //这里注意千万不要少了`All`
            .data(dataset)
            .enter()
            .append("rect")
            .attr("x",20)
            .attr("y",function(d,i){
                return i * rectHeight;
            })
            .attr("height",rectHeight-2)
            .attr("width",function(d){
                return linear(d);   //就是再这里使用到了比例尺
            })
    </script>
</body>

</html>

中古骑士1992

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
D3.js中比例尺的使用

1.为什么要使用比例尺将某一区域映射到另外一个区域，其大小关系不变 2.有哪些比例尺D3中的比例尺，很像数学中的函数给定一个x（定义域）。也就确定了一个y（值域）。D3中称为domain和range。我们在使用时，需要给定domain和range的范围，便得到了一个映射关系线性比利尺将一个连续的区间，映射到另外一个区间假设有如下数组 var dataset = ...
复制链接

扫一扫