官网https://github.com/d3/d3-selection/blob/master/README.md#selection_data

var data = [
{name: "Locke", number: 4},
{name: "Reyes", number: 8},
{name: "Ford", number: 15},
{name: "Jarrah", number: 16},
{name: "Shephard", number: 31},
{name: "Kwon", number: 34}
]; d3.selectAll("div")
.data(data, function(d) { return d ? d.name : this.id; })
.text(function(d) { return d.number; });

This example key function uses the datum d if present, and otherwise falls back to the element’s id property. Since these elements were not previously bound to data,

the datum d

is null when the key function is evaluated on selected elements,and

non-null when the key function is evaluated on the new data.

这样写就行了。

d3 data()数据绑定中的key函数的更多相关文章

  1. mysql json_extract函数获取json字段中某个key的值

    参考:https://www.cnblogs.com/chuanzhang053/p/9139624.html json_extract函数可以获取json对象中指定key的值,用法:json_ext ...

  2. VUE005. 在data中使用 / 改变data,或在data中调用method函数

    使用三方UI库时经常会遇到在data中写入方法的场景,如Element-UI的级联选择器(动态加载part)需要在data中写入lazyLoad. 但后端总会给出意想不到的需求: 通过接口调取一串数据 ...

  3. (转)笔记320 SQLSERVER中的加密函数 2013-7-11

    1 --SQLSERVER中的加密函数 2013-7-11 2 ENCRYPTBYASYMKEY() --非对称密钥 3 ENCRYPTBYCERT() --证书加密 4 ENCRYPTBYKEY() ...

  4. 在MongoDB中实现聚合函数 (转)

    随着组织产生的数据爆炸性增长,从GB到TB,从TB到PB,传统的数据库已经无法通过垂直扩展来管理如此之大数据.传统方法存储和处理数据的成本将会随着数据量增长而显著增加.这使得很多组织都在寻找一种经济的 ...

  5. jQuery中常用的函数方法

    jQuery中常用的函数方法总结 Ajax处理 load(url,[data],[callback]) url (String) : 待装入 HTML 网页网址. data (Map) : (可选) ...

  6. JavaScript中的Generator函数

    1. 简介 Generator函数时ES6提供的一种异步编程解决方案.Generator语法行为和普通函数完全不同,我们可以把Generator理解为一个包含了多个内部状态的状态机. 执行Genera ...

  7. 在MongoDB中实现聚合函数

    在MongoDB中实现聚合函数 随着组织产生的数据爆炸性增长,从GB到TB,从TB到PB,传统的数据库已经无法通过垂直扩展来管理如此之大数据.传统方法存储和处理数据的成本将会随着数据量增长而显著增加. ...

  8. Python中的分组函数(groupby、itertools)

    from operator import itemgetter #itemgetter用来去dict中的key,省去了使用lambda函数 from itertools import groupby ...

  9. 一个初学者的指南,使用D3做数据绑定

    一个初学者的指南,使用D3做数据绑定 D3.js 是个强大的数据可视化库,可以做出惊艳的图表.比如:气泡图,线图和条形图--只需要很少行的代码 随着初学者对JavaScript的理解,可以将数组或者对 ...

随机推荐

  1. 纯CSS打造萌萌哒大白

    HTML部分: <body> <div id="baymax"> <!-- 定义头部,包括两个眼睛.嘴 --> <div id=" ...

  2. 从技术专家到管理者的思路转变(V1)

    作为技术专家出身的管理者,是一种优势(你所做的很多决策可能比非技术出身的管理者更加具有可行性和性价比).也是一种劣势(你可能会过于自恋自己的技术优势).这取决于你在接下去的职业生涯中,如何取舍你的技术 ...

  3. [J2EE]struts+ejb笔记

    DispatchAtion: - org.apache.struts.actions.DispatchAction 这个类是个抽象类,但实现父类Action的execute方法,在项目中重写这个类可以 ...

  4. Python带_的变量或函数命名

    python中的标识符可以包含数字.字母和_,但必须以字母或者_开头,其中以_开头的命名一般具有特殊的意义. 前后均带有双下划线__的命名 一般用于特殊方法的命名,用来实现对象的一些行为或者功能,比如 ...

  5. C语言goto语句的使用

    不使用goto语句: 使用goto语句: 使用goto语句时需要注意以下原则:1) 不要过份地使用.比如图2中的60行就没有采用goto语句跳到程序的最后面,之所以这里不使用goto是为了阅读方便.因 ...

  6. yum命令showduplicates安装指定版本包

    默认情况下,我们用yum list 或者 yum install 的时候,yum会默认选择最新的版本. 如果我们需要安装指定版本的某个软件包,以使之能够和我们现有环境的软件包版本匹配,那么就需要用到s ...

  7. ZOJ 3963 Heap Partition(multiset + stl自带二分 + 贪心)题解

    题意:给你n个数字s1~sn,要你把它们组成一棵棵二叉树,对这棵二叉树来说,所有节点来自S,并且父节点si<=子节点sj,并且i<j,问你树最少几棵二叉数.树 思路:贪心.我们往multi ...

  8. Codeforces Round #535 (Div. 3) 解题报告

    CF1108A. Two distinct points 做法:模拟 如果两者左端点重合就第二条的左端点++就好,然后输出左端点 #include <bits/stdc++.h> usin ...

  9. 深度学习课程笔记(八)GAN 公式推导

    深度学习课程笔记(八)GAN 公式推导 2018-07-10  16:15:07

  10. Latex: 设置 threeparttable footnote 行宽度

    参考: Table width with threeparttable smaller than notes and caption? Latex: 设置 threeparttable footnot ...