D3.js学习总结(二)——基础知识(2)

选择集的常用操作

选择集有一个常用的方法,包括:

  1. 过滤filter——根据指定的条件对选择集进行过滤;
  2. 排序sort——根据被绑定的数据对选择集的元素进行排列,默认为升序排列;
  3. 遍历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()——或者映射的大小。
参与评论 您还未登录,请先 登录 后发表或查看评论
©️2022 CSDN 皮肤主题:编程工作室 设计师:CSDN官方博客 返回首页

打赏作者

黄金安魂曲

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值