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

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

D3.js 是个强大的数据可视化库,可以做出惊艳的图表。比如:气泡图,线图和条形图--只需要很少行的代码

随着初学者对JavaScript的理解,可以将数组或者对象转换成一个五彩缤纷的显示效果。然而,每一个初学者的比较纠结的是一开始理解如何将数据绑定在实际的DOM元素上。这就是我们所知道的“数据绑定”或者叫“数据连接”。这是一个重要的处理,因为这个整个过程的第一步!

非常直观的,你可能希望使用一个 for() 循环,循环每一项数据并且创建一个元素,像这样:

    var data = [{x: 100,y: 100},{x: 200,y: 200},{x: 300,y: 300}]
    for(var i = 0; i< data.length;i++){
        svg.append("circle")
            .attr("cx",function(data){ return data[i].x;})
            .attr("cy",function(data){ return data[i].y;})
            .attr("r",2.5);
    }

但是,这并没有说如何让它工作,事实上,这里没有for()循环,下面的这个代码块将覆盖上面的功能:

    var data = [{x: 100,y: 100},{x: 200,y: 200},{x: 300,y: 300}]
    svg.selectAll("circle")
        .data(data)
        .enter().append("circle")
        .attr("cx",function(data){ return data[i].x;})
            .attr("cy",function(data){ return data[i].y;})
            .attr("r",2.5);

这段代码会添加3个黑色的圆圈到你的SVG cancas,哇,这是因为D3使用了声明式编程,for()循环隐含在这个代码块里。

这篇文章将用于入门,所以我会将上面的代码块一行一行的解释,可以让你完全理解代码是如何运行的。我觉得可以将这个比喻为一个蔬菜种植园。当你读完这篇文章,你将可以建立一个基本的可视化视图,使用5到10行代码。

如果你想找一些关于这个概念更多的技术说明,可以去看D3文档或者Scott Murray的guide to binding

第一步:svg/地块

首先,你需要选择一个地方来画你的可视化试图。这就相当于你想找一块地方来种植。

    var svg=d3.select("body")
      .append("svg")
      .attr("weight",‘800px‘)
      .attr("height",‘800px‘);

你创建了一个800px * 800px的地块--这个"body"--一个你可以加入元素的地方。相当简单。

第二步:selectAll/挖洞

接下来,我们需要selectAll()语句来创建一个组,后面我们将用元素填充。想象一下,就像是在你的花园里挖洞。D3可以更新或者移除整个元素组,这是例子:

    svg.selectAll("circle")

如果你没有添加任何的圆圈,那这个是正常的,请注意,"circle"是SVG specification中一个基本的形状,如果你添加了圆圈,你可以选择使用类名,像这样:

    svg.selectAll(".circleClass")

这张图不是很准确,因为你的花园里可以有无数个洞。没有什么好的方式使用一张图合理的说明这块空地的数量。最重要的是你规划一块区域,放入你的数据元素。如果你想加入SVG“矩形”元素。你会在你花园的另外一部分添加。在代码里的这一点,你并不清楚你会添加多少元素。下面就让我们来弄清楚这个。

第三步:Data/种子

这是最重要的一部分。它决定了你将用于可视化的数据。在JavaScript里,你可以通过数组或者对象传递数据,在这一步,你"绑定"你的数据在DOM元素上,DOM元素的类型是你在selectAll()中所指定的。你可以像平时在JavaScript的方式引用数组或者对象的子项。在这个例子里,这里有三个子项在数组中,当我们写完如下代码,所以我们希望有三个DOM元素被添加:

    var data = [{x: 100,y: 100},{x: 200,y: 200},{x: 300,y: 300}]
    svg.selectAll("circle")
        .data(data)

这很像选择一种特定类型的种子种在你的花园里。每个类型的种子都有一定的特性,并且我们知道这些种子的类型。

第四步:Enter/把种子放入洞里

.enter() 方法匹配selectAll语句中数组或者对象的子项数量,并且决定了你需要创建的元素的数量。你不再拥有一个无限土地。洞的数量现在匹配你想要种的植物的数量:

    svg.selectAll("circle")
        .data(data)
        .enter()

在这个例子的代码中,有三个坑,种子是一种特定的类型(比如:土豆),这也决定了你的代码会自动迭代的次数(3次)

第五步:Append/植物的结构

.append()方法决定了你使用哪种SVG基本形状,尽管你有很多选项在selectAll()语句中,但在这一步你只有7种形状可以选择。selectAll()是为一组命名,append()是命名为实际的形状。

    svg.selectAll("circle")
        .data(data)
        .enter().append("circle")

这跟你植物的结构很相似,你想要你的植物长成什么样子?如果你想长成番茄,你需要一个塔,不同的形状和不同的数据可视化是适用于不同的数据集。

简要说明如何访问数据

好了,现在你已经添加了3个圆圈的DOM元素,你选择了你的土地,挖了洞,种下了种子并且提供植物生长的结构。以下是如何选择每个圆圈的属性:

    .attr("cx", function(d) { return d.x; })
    .attr("cy", function(d) { return d.y; })

根据圆的规范,我们知道,可以通过SVG canvas 使用cx和cy来决定圆的位置,在上面的例子中,我们使用了function(d)去访问一开始的数组里的每一个子项,直到我们使用了.enter(),这个代码块会根据数组中的每一个元素运行一次,总共运行了三次。

这个d参数代表了数组中的每一个元素,比如:{x: 100, y: 100},如果参数的形式d,i,这个i就是数组的索引,当它是0的时候指的是数组中第一个元素,1时指的是第二个元素,以此类推。当你调用它时d.x,就是在查找每个元素的x属性,并把相应的值变成像素,在我们的例子中,是距离右边100个像素,现在你就是在使用平常所使用的Javascript!你可以使用if语句,调用function等等一些其他的。

结论

在你使用D3构建很酷的东西的时候,你需要理解你选择的将数据转换在DOM元素中的具体的方法,样式相比数据是比较简单的。添加文本跟添加形状特别相似,一旦你理解的数据这部分,你也会理解文本。

尽管你可能会D3的创造者添加了这样富有挑战性的概念在早期的学习过程,但是他们有好的理由这么做。D3是一个灵活的库,你可以接近自动的处理很多挑战,这个数据绑定结构可以帮助你完成复杂的操作,仅需要一两行代码,现在就去惊艳你的用户吧!

时间: 2024-10-08 04:18:49

一个初学者的指南,使用D3做数据绑定的相关文章

从现在开始,做一个初学者——这才是真面目

虽然嘴上一直说着要谦虚学习,要有初学者的心态,可是潜意识中总也不愿忽略自己的年纪. 但是却忽略了输液有专攻,你急再大,看你都用来做了什么.修电脑时间再长也学不会写程序!这个道理没人想不通. 只是我莫名其妙地不愿想通罢了. 只是我好高骛远只想着赚钱罢了. 从现在起,做回真实的自己: 从基础起,做回认真的学生: 从内心里,做回踏实的码农. 从我最亲近的C开始吧,本来这是我最熟悉的,没想到现在成为最生疏的语言了.从今开始,每日一篇. 不积跬步,无以至千里! 从现在开始,做一个初学者--这才是真面目,布

一个初学者对于jdbc增删改查的一点看法和困惑

我们今周学习了 jdbc的增删改查,总之是各种恍然大悟然后又接着陷入新一轮的苦恼中(相信你们一定深有体会),由于本人的java基础较差,所以是在实践中是各种稀奇古怪的错误频发,接下来我列举几个这几天我犯得让我的老师哭笑不得的错误. 首先是错误:com.microsoft.sqlserver.jdbc.SQLServerException: 已生成用于更新的结果集. 这是我运行我的删除操作之后报的错误,结果是原表无变化,经打断点检查id已经上传,换句话来说程序没有问题,各位小伙伴们能从这只言片语中

一个初学者的辛酸路程-装饰器-5

前言: 继续前进 基础回顾: 1.集合 集合有2个重要作用:关系测试(并集,差集,交集)和去重. 2.文件编码 2.7上默认文件编码是ASCII码,因为不支持中文,就出了GB2312,在2.7上要支持中文就必须申明文件编码以UTF-8的格式,UTF-8与GB2312的关系? UTF-8是Unicode的扩展集合,Unicode包括全国地区的编码,中国很多开始程序还是以GBK的格式,GBK向下兼容GB2312,Windows默认编码是GBK. Unicode为何要做出来?为了节省空间,存英文中文都

【spring cloud】导入一个新的spring boot项目作为spring cloud的一个子模块微服务,怎么做/或者 每次导入一个新的spring boot项目,IDEA不识别子module,启动类无法启动/右下角没有蓝色图标

如题:导入一个新的spring boot项目作为spring cloud的一个子模块微服务,怎么做 或者说每次导入一个新的spring boot项目,IDEA不识别,启动类无法启动,怎么解决 下面一起来走一遍这个流程: 1.将一个spring boot服务导入spring cloud中作为一个子模块 如图:这里有一个现成的spring cloud微服务集群,[如何创建一个spring cloud微服务:https://www.cnblogs.com/sxdcgaq8080/p/9035724.h

作为一个初学者如何简单地理解闭包

闭包最直接的定义:函数可以记住并访问所在的词法作用域时,就产生了闭包,即使这个函数是在当前词法作用域之外执行的. 如下代码: function foo() { var a = 1; function bar() { console.log(a); } bar(); } foo(); // 1 kyle给的一个定义,首先给人的第一感觉就是,这不就是在说作用域的查找规则吗?因为就算一个初学者不懂闭包,依然能理解这种结果,原因很简单,因为bar函数是嵌套在foo函数中.确切来说,这并不算是闭包.这种作

当开发者产生一个伟大的想法之后应该做的10件事

当你正和家人享受一个悠闲的午后,一个不错的想法突然出现在你的脑海里.不管它是一个 App 还是服务,或是一个新的概念.只要你把这个想法付诸实践,它就可能会成为下一个 uber,甚至会改变世界. 那接下来你应该怎么做呢?这里有一个指南,会告诉你在决定把自己这个想法实现之后应该做的事情. 1. 起一个名字 在你决定开始之后,要做的第一件事就是为你的产品起一个名字,这个名字是有多重要大家心里都很清楚,如果你并不擅长起名字,你可以通过一些工具来扩展你的思路,如 visual thesaurus, Wer

一个初学者关于vr游戏开发的优化总结

最近在做一个关于vr游戏的项目,作为一个刚刚毕业并且刚刚进入这一行业的新手,有太多太多的东西需要学了.经过这个三个月的时间,在整个团队的合作下,算是基本完成了游戏吧,平台是三星的gear vr,现有在三星官方商店上架,其实游戏现在还并不很完善,很多bug可能还没修复,用户体验也没有做好,但是由于种种原因还是上架了,好评率不高.不过这次也让我学到了挺多的东西的,在这里就稍微记录一下,作为一个新手的经验,也希望以后还能对照着去做以后的游戏. 这次要讲的是关于性能优化这一块,因为之前准备在oculus

Pandas初学者代码优化指南

如果你用Python语言做过任何的数据分析,那么可能会用到Pandas,一个由Wes McKinney写的奇妙的分析库.通过赋予Python数据帧以分析功能,Pandas已经有效地把Python和一些诸如R或者SAS这样比较成熟的分析工具置于相同的地位. 加QQ群813622576或vx:tanzhouyiwan免费领取Python学习资料 不幸的是,在早期,Pandas因"慢"而声名狼藉.的确,Pandas代码不可能达到如完全优化的原始C语言代码的计算速度.然而,好消息是,对于大多数

Python初学者入门指南,5天入门Python不是问题(附资料)

打算学习 Python 来做数据分析的你,是不是在开始时就遇到各种麻烦呢? 到底该装 Python2 呢还是 Python3 ? 为什么安装 Python 时总是出错? 怎么安装工具包呢? 为什么提示说在安装这个工具前必须先安装一堆其他不明所以的工具? 相信大多数 Python 的初学者们都曾为环境问题而头疼不已,但你并不孤独,大家都是这么折腾过来的.为了在入门时少走弯路,并且让高涨的积极性不至于太受打击,这里推荐使用 Anaconda 来管理你的安装环境和各种工具包. 本文介绍了Anacond