官网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. php 网页版 ftp 小工具

    <?php define('IN_ECS', true); session_start(); header("Content-type:text/html;charset=utf-8& ...

  2. Vue基础进阶 之 Vue生命周期与钩子函数

    Vue生命周期 Vue生命周期:Vue实例从创建到销毁的过程,称为Vue的生命周期: Vue生命周期示意图:https://cn.vuejs.org/v2/guide/instance.html#生命 ...

  3. spring boot 1.x完整学习指南(含各种常见问题servlet、web.xml、maven打包,spring mvc差别及解决方法)

    spring boot 入门 关于版本的选择,spring boot 2.0开始依赖于 Spring Framework 5.1.0,而spring 5.x和之前的版本差距比较大,而且应该来说还没有广 ...

  4. rocketmq消息重复推送的问题

    最近,在公司的测试环境,遇到个问题,每次重启应用重启后,原来消费过的消息又被重复推送了一遍,消费者和生产者代码如下: package com.tf56.queue.client; import jav ...

  5. charles最新破解jar文件,及浏览器证书安装

    一 在线破解文件下载 Charles 在线破解工具,https://www.zzzmode.com/mytools/charles/ 描述 此工具用于生成破解后的charles.jar文件,  破解原 ...

  6. fastjson常用方法

    fastjson是一款alibaba公司开发的json工具包.json经常被使用在数据传输方面,因此特意对它的一些常用方法做备注,欢迎看客在评论区补充或指出问题. 首先定义一个实体类,用于我们进行对象 ...

  7. HDU 4366 Successor(dfs序 + 分块)题解

    题意:每个人都有一个上司,每个人都有能力值和忠诚值,0是老板,现在给出m个询问,每次询问给出一个x,要求你找到x的所有直系和非直系下属中能力比他高的最忠诚的人是谁 思路:因为树上查询很麻烦,所以我们直 ...

  8. 多线程编程:一个指令重排序引发的chaos

    先贴出正确的代码: package com.xiaobai.thread.main; import lombok.extern.slf4j.Slf4j; @Slf4j public class Thr ...

  9. 使用digitalocean进行项目开发

    使用digitalocean进行项目开发 命令记录 搭建SS 1 apt-get update 2 apt-get install python-pip 3 pip install --upgrade ...

  10. Deep Learning framework --- MexNet 安装,测试,以及相关问题总结

    Deep Learning framework --- MexNet 安装,测试,以及相关问题总结  一.安装:   参考博文:http://www.open-open.com/lib/view/op ...