”D3 4.x数据可视化实战“——数据绑定

1、将数组绑定为数据

let data = [10, 50, 15, 23];
function render(data) {
  let bars = d3.select('body').
    selectAll('div.h-bar')
    .data(data);
  bars.enter()
    .append('div')
    .attr('class', 'h-bar')
    .merge(bars)
    .style('width', (d) => {
      return (d * 3) + 'px';
    })
    .style('border', '1px solid red')
    .style('background', 'red')
    .text((d) => {
      return d;
    });
  bars.exit()
    .remove();
}

setInterval(() => {
  data.shift()
  data.push(Math.round(Math.random() * 100))
  render(data)
}, 1500)

render(data)
在选集上调用data()将数组绑定在将要创建的图形元素上,调用enter()进入“进入”模式,选出还没有可视化的数据元素;在后面调用merge()函数,以选中的元素,实际上merge()函数作用是进入“进入-更新”模式,进行合并,返回二者的并集,避免重复代码;
最后调用exit()进入“退出“模式,删除没有任何数据关联的图形元素。
原文链接:segmentfault.com

上一篇:Javascript协程与迭代器
下一篇:函数式组件 && React Hook

相关推荐

  • 🚀webpack 4 beta — try it today!🚀

    Now that webpack is a 0CJS (Zero Configuration) outofthebox bundler, we will lay groundwork in 4.x a...

    2 年前
  • 🔥一步一步的带你走进Webpack4的世界

    前言 webpack是当下最热门的前端资源模块化管理和打包工具,它可以将许多松散的模块按照依赖和规则打包成符号生产环境部署的前端资源,还可以将按需加载的模块进行代码分割。

    2 个月前
  • 页面可视化搭建工具前生今世

    原文地址: https://github.com/CntChen/cn...(https://github.com/CntChen/cntchen.github.io/issues/15) 背景...

    2 年前
  • 页面CPU和内存占用监控可视化Chrome插件-Graph Process

    写这个插件的原因是最近要对比一下页面的 cpu 和内存占用的性能,本来是想找看看有没有什么软件能够去可视化一下当前标签页的cpu和内存占用,但是发现却找不到这种软件,mac 上有个活动监视器,但是当...

    6 个月前
  • 音频可视化中的信号处理方案

    声明: 原创文章,未经允许不得转载。 音频可视化是一个“听”起来非常“美”好的话题,其复杂程度很大程度上依赖视觉方案(一些例子(https://github.com/willianjusten/a...

    10 个月前
  • 面试题 —淘宝网现场面试题49题(JVM+算法+Redis+Mysql+Spring)

    clipboard.png(https://img.javascriptcn.com/a76e14a488d6de326b728f1f0e5e8e00 "clipboard.png") 淘宝一面: ...

    1 年前
  • 面试官:请手写一个webpack4.0配置

    确认过眼神,你还是没有准备秋招的人?时间仓促。自京东6月8号开启管培生的招聘,就意味着秋招的开始。然而你还在等着秋天的到来?今年形势应该更为严峻,随着各大技术(vue,webpack,react,微信...

    2 年前
  • 非常有用的 48 个 JavaScript 代码片段,值得收藏!

    该项目来自于 Github 用户 Chalarangelo,目前已在 Github 上获得了 5000 多Star,精心收集了多达 48 个有用的 JavaScript 代码片段,该用户的代码可以让...

    2 年前
  • 阿里云部署 4.短信服务

    (https://img.javascriptcn.com/1af9ef467c9d07f9eeadfb62c021120a) 如果你购买了阿里云的短信服务,可以通过短信API实现验证码、推广短信、...

    5 个月前
  • 阿里云携手优锘发布智慧园区可视化产品

    2019年3月21日,2019阿里云峰会在北京国家会议中心如期举行。峰会上,阿里云与优锘科技联合发布了智慧园区可视化产品。 本次峰会中,围绕“十年再出发”的主题,阿里云首次进行全面战略解读,并重磅发...

    1 年前

官方社区

扫码加入 JavaScript 社区