官网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. Mac配置java运行环境的步骤

    官网下载地址:jdk1.8版本的  http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.htm ...

  2. bzoj2595 / P4294 [WC2008]游览计划

    P4294 [WC2008]游览计划 斯坦纳树 斯坦纳树,是一种神奇的树.它支持在一个连通图上求包含若干个选定点的最小生成树. 前置算法:spfa+状压dp+dfs(大雾) 我们设$f[o][P]$为 ...

  3. linux centos6.8搭建 jdk 环境

    1. 上官网下载jdk1.8的包 http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html ...

  4. div容器中内容垂直居中

    #box{ width:200px; height:200px; line-height: 200px; vertical-align: middle; margin: 5px; background ...

  5. oracle 12.2 linux/solaris正式发布

    oracle 12.2 linux/solaris正式发布,可以从http://www.oracle.com/technetwork/database/enterprise-edition/downl ...

  6. 【题解】Luogu P2146 [NOI2015]软件包管理器

    题面:https://www.luogu.org/problemnew/lists?name=2146 这道题要用树链剖分,我博客里有对树链剖分的详细介绍 这道题就是树链剖分的模板,详细解释见程序. ...

  7. 【题解】Luogu P4679 [ZJOI2011]道馆之战

    原题传送门 码农题树剖好题,口袋妖怪是个好玩的游戏 这道题要用树链剖分,我博客里有对树链剖分的详细介绍 下文左右就代表树的节点按dfs序后的左右,上.下分别表示每个节点的A.B区域 考虑在链上的情况, ...

  8. Android之电话拨号和短信

    拨打电话号码,需要添加权限设置,在安装的应用程序信息中可以看到此权限信息Intent doSth=new Intent();//意图:你想做什么呢?doSth.setAction(Intent.ACT ...

  9. jq svg 修改image的xmlns:xlink及图片的显隐

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

  10. 学习Django,http协议,

    学习Django http协议 规则 ''' http协议:超文本传输协议 ①基于TCP/IP协议基础上的应用层协议,底层实现仍为socket ②基于请求-响应模式:通讯一定是从客户端开始,服务器端接 ...