D3.js data() 方法详解

本文详细介绍了D3.js中的数据绑定方法data(),讲解如何将数据与DOM元素进行绑定,以及如何处理不同类型的data,如数组、JSON等。通过示例展示了enter()方法的使用,同时探讨了在text()等方法中如何利用data()方法确保参数与dataset对应。文章还提到了非数组数据结构的处理,并指出D3.js的功能远不止于此。
摘要由CSDN通过智能技术生成

Binding data(数据绑定)

  D3各种图表的作用体现在将数据(Data)转换成可视化的过程。

  比如将一个月的气温数据,通过树形图来展现,能够直观的看到气温走势,下个月还需不需要穿秋裤 :)

  我们通过D3的 selection.data() 方法来将 data 绑定到 DOM 元素。因此,一个绑定过程的必要条件既是:data 和 DOM目标元素(没有目标元素,你还bind个卵~)。

 

从Data说起...

  D3还是很聪明的,可以处理多种data类型,像数组、字符串、对象类型。同样可以优雅的接受JSON,更牛B的是它拥有自己的内部方法,可以直接加载CSV文件(当然需要load CSV文件就不是我们在桌面创建个index.html然后用chrome打开那么easy了,你需要一个应用server,通过http还是https来获取CSV并加载了)。

  这里我们先准备一个简单的数组吧

var dataset = [1, 2, 3, 4, 5];

  既然上面都有一行code了,看了免不了还要写点代码了。我们要把上面的数组跟

  • 2
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值