d3初级教程之data的Key函数

enda 发布于2019-08-21 12:12 / 2938人阅读

摘要：一开始用一直都没留意到还有个参数后来刚接触到函数就有些让我迷惑了再后来发现这的确是个神器呀巴拉巴拉巴拉废话不多说让我们通过一个简单的来认识一下它在一个空白页添加下面代码样式三个天蓝色小蓝条登场分别是宽度为的元素我们在中添加如下代码并运行情况

一开始用D3.data()一直都没留意到还有个Key参数,后来刚接触到key函数就有些让我迷惑了,再后来发现这的确是个神器呀.巴拉巴拉巴拉...废话不多说,让我们通过一个简单的demo来认识一下它.
在一个空白页添加下面代码
样式:

div {
            margin: 10px 10px;
            height: 20px;
            background: #0055ff;
        }

js:

var dataset = [1, 2, 3];
    var divs = d3.select("body")
            .selectAll("div")
            .data(dataset)
            .enter()
            .append("div")
            .style("width", function (d) {
                return d * 100 + "px";
            });

ok,.三个天蓝色小蓝条登场,分别是宽度为100px, 200px, 300px的div元素

1,我们在js中添加如下代码并运行:

function change() {
        dataset = [3];
        divs.data(dataset)
            .exit()
            .remove();
    }
    setTimeout(change, 2000)

ok,情况大致你能猜到,第一条小蓝条留了下来,后面两条被干掉了,观察留下的蓝条 data 属性,是3

2, 将1中添加的代码换成下面的并运行:

 function change() {
    dataset = [3];
    divs.data(dataset, function(d) {
        return d;
    })
        .exit()
        .remove();
}
setTimeout(change, 2000);

细心的你能发现,我们只是给selection.data()添加了一个Key函数
这时神奇的事情出现了,前两条蓝条被干掉留下了第三条.蓝条的 data属性任然是3

完毕,思考半分钟,你想到了没有,其实总的来说data的key函数参数,提供了一种,由data到selection的映射关系.
希望我的文章能帮助到你,更多资料请翻阅d3js.org,我是朱现明,任职于精硕科技可视化部门前端开发,更多精彩的文章即将奉上.

zhuxianming@admaster.com.cn

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/87498.html

d3js中级教程之漂浮的卡牌效果(data的key函数进阶)

摘要：效果如图所示链接地址源码链接地址其实这个例子也很简单用到的也只是的基础部分我们要把一定间隔请求过来的数据进行排序并生成元素同时重用原来和新数据相对应的元素删除不对应的说的有点绕表达能力不行其实说到这明白人都能看出来了这要用到选择器的以及方法 showImg(http://segmentfault.com/img/bVbZY5); 效果如图所示,demo链接地址源码链接地址其实这个例...

zhoutao 2019-08-28 17:53 评论0 收藏0
d3js中级教程之漂浮的卡牌效果(data的key函数进阶)

摘要：效果如图所示链接地址源码链接地址其实这个例子也很简单用到的也只是的基础部分我们要把一定间隔请求过来的数据进行排序并生成元素同时重用原来和新数据相对应的元素删除不对应的说的有点绕表达能力不行其实说到这明白人都能看出来了这要用到选择器的以及方法 showImg(http://segmentfault.com/img/bVbZY5); 效果如图所示,demo链接地址源码链接地址其实这个例...

Lin_R 2019-08-21 12:13 评论0 收藏0
D3中级教程之带有动画效果的简易罗盘

摘要：最终效果如上图所示说是中级教程代码其实也太简单源码链接在此部分解释一下首先声明这是作者推荐的写法还是规范点好这样写不久你就会发现事半功倍其次是函数画圆环全靠它自定义函数用于给定和圆环的最大值计算结束角度自定义函数用于给定和圆环的最大值计算指 showImg(http://segmentfault.com/img/bVbX9J); 最终效果如上图所示说是中级教程,代码其实也太简...

littlelightss 2019-08-21 12:12 评论0 收藏0
使用D3.js构建实时图形

摘要：在本教程中，我们将探讨如何使用和构建实时图形。通过方法监听轮询更新，并在收到更新后使用最新数据调用函数，以便重新呈现图形。首先你需要在计算机上安装Node和npm。数据的可视化表示是传递复杂信息的最有效手段之一，D3.js提供了创建这些数据可视化的强大工具和灵活性。 D3.js是一个JavaScript库，用于使用SVG，HTML和CSS在Web浏览器中生成动态的交互式数据可视化。...

Ryan_Li 2019-08-23 11:31 评论0 收藏0
使用D3.js构建实时图形

摘要：在本教程中，我们将探讨如何使用和构建实时图形。通过方法监听轮询更新，并在收到更新后使用最新数据调用函数，以便重新呈现图形。首先你需要在计算机上安装Node和npm。数据的可视化表示是传递复杂信息的最有效手段之一，D3.js提供了创建这些数据可视化的强大工具和灵活性。 D3.js是一个JavaScript库，用于使用SVG，HTML和CSS在Web浏览器中生成动态的交互式数据可视化。...

AlphaWatch 2019-08-02 16:31 评论0 收藏0