D3.js学习总结（二）——基础知识（2）

最新推荐文章于 2021-08-24 15:34:33 发布

黄金安魂曲

最新推荐文章于 2021-08-24 15:34:33 发布

阅读量461

点赞数

分类专栏：前端文章标签： D3.js

本文链接：https://blog.csdn.net/keanu1978/article/details/79000920

版权

前端专栏收录该内容

5 篇文章 0 订阅

订阅专栏

选择集的常用操作

选择集有一个常用的方法，包括：

过滤filter——根据指定的条件对选择集进行过滤；
排序sort——根据被绑定的数据对选择集的元素进行排列，默认为升序排列；
遍历each——循环处理每一个选择集的元素；

如下代码所示：

<body>
    <script>
        var dataset = [10, 20, 30, 40, 50];
        var p = d3.select("body").selectAll("p");
        p.data(dataset).enter().append("p")
                .text(function(d){
                    return d;
                }).sort(function(a, b){
                    return b-a; // 倒序排列
                }).filter(function(d){
                    if(d > 20){ return true; }
                    else{ return false; }
                }).style("color", "red");

        var persons = [{id:1001, name:"张三"}, {id:1002, name:"李四"}];
        p.data(persons).enter().append("p")
                .each(function(d, i){
                    d.age = 20;
                })
                .text(function(d, i){
                    return d.id + " " + d.name + " " + d.age;
                })
    </script>
</body>

数组的常用操作

常用的操作包括：

d3.ascending()——升序排列；
d3.descending()——降序排列；
d3.min(array[, accessor])——获取数组中的最小值，accessor表示一个函数，当指定这个函数之后，d3会先调用这个函数对数组进行处理，然后在获取最小值；
d3.max(array[, accessor])——获取数组中的最大值；
d3.extent(array[, accessor])——获取数组中的最小值和最大值；
d3.sum(array[, accessor])——忽略数组无效数值后的求和。若数组为空则返回0；
d3.mean(array[, accessor])——忽略数组无效数值后的求均值。若数组为空则返回undefined；

<body>
    <script>
        var numbers = [54, 23, 77, 11, 34];
        numbers.sort(d3.ascending); // 升序排列
        console.log(numbers);

        var numbers = [30, 20, 10, 50, 40];
        var min = d3.min(numbers); // 返回最大值
        var max = d3.max(numbers); // 返回最小值
        var extent = d3.extent(numbers); // 返回最大和最小值
        console.log(min);
        console.log(max);
        console.log(extent);

        // 使用accessor，在求值之前先处理一下数据
        var minAcc = d3.min(numbers, function(d){ return d*3; });
        var maxAcc = d3.max(numbers, function(d){ return d-5; });
        var extentAcc = d3.extent(numbers, function(d){ return d%7; });
        console.log(minAcc);
        console.log(maxAcc);
        console.log(extentAcc);

        numbers = [69, 11, undefined, 53, 27, 82, 65, 34, NaN];
        var sum = d3.sum(numbers, function(d){ return d/3 }); // 和值
        var mean = d3.mean(numbers); // 均值
        console.log(sum);
        console.log(mean);
    </script>
</body>

d3.range([start, ]stop[, step])——创建一个等差数列，start默认为0，step默认为1。创建的数列不包含stop；
d3.shuffle(array)——将数组顺序随机打乱，重新输出；
d3.merge(arrays)——合并多个数组，组成一个新的数组；

<body>
    <script>
        // Srart=0, stop=10, step=1
        var a = d3.range(10);
        console.log(a);
        // srart=2, stop=10, step=1
        var b = d3.range(2, 10);
        console.log(b);
        // srart=2, stop=10, step=2
        var c = d3.range(2, 10, 2);
        console.log(c);

        // 随机打乱数组顺序
        var numbers = [10, 13, 16, 19, 22, 25];
        d3.shuffle(numbers);
        console.log(numbers);

        // 合并两个数组
        var a1 = [12, 14, 33];
        var a2 = [24, 5, 38];
        var a3 = d3.merge([a1, a2]);
        console.log(a3);
    </script>
</body>

数据结构-映射

映射（Map）数据结构本质就是一个键值对，由key和value组成。d3的Map有如下方法：

d3.map([object][, key])——构建映射，object为源数组，key为指定映射的key；
map.has(key)——判定指定的key是否存在；
map.get(key)——得到该key对应的value，如果不存在则返回undefined；
map.set(key, value)——创建一个键值对，如果key存在则覆盖新值；
map.remove(key)——删除一个键值对并返回true。如果不存在则返回false；
map.keys()——以数组的形式返回所有的key；
map.values()——以数组的形式返回所有的value；
map.entries()——以数组的形式返回所有的键值对；
map.each(function(k, v))——对映射的每一项调用function函数进行遍历处理；
map.empty()——判断映射是否为空；
map.size()——或者映射的大小。

黄金安魂曲

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
D3.js学习总结（二）——基础知识（2）

选择集的常用操作选择集有一个常用的方法，包括：过滤filter——根据指定的条件对选择集进行过滤；排序sort——根据被绑定的数据对选择集的元素进行排列，默认为升序排列；遍历each——循环处理每一个选择集的元素；如下代码所示：body> script> var dataset = [10, 20, 30, 40, 50]; va
复制链接

扫一扫

专栏目录