D3.js学习记录

时间：2022-09-26 09:43:15
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

<head>

    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />

    <title>D3</title>

    <style>

    .chart div{

        background-color: #3498db;

        text-align: right;

        padding: 3px;

        margin: 1px;

        color: white;

    }

    </style>

    <script src="/javascripts/d3js/d3.v3.js"></script>

    <script src="/javascripts/d3js/jsonData3.js"></script>

</head>

<body>

    <script>

    //create a data

    var data = [4, 8, 5, 2, 10, 20];

    //创建一个容器

    var chart = d3.select("body")

                    .append("div")

                    .attr("class", "chart");

    //向容器中添加几个div元素

    chart.selectAll("div")

            .data(data)

            .enter()

            .append("div")

            .style("width", function(d){

                return d*10 + 'px';

            })

            .text(function(d){

                return d;

            })

    </script>

</body>

</html>

D3.js也是一个javascript框架，像jquery一样， 只不过他的特长是在数据可视化这一块而已。所以不要觉得D3是多么的复杂。在上面的代码中我们可以看到D3的一些用法：

　　选择元素：d3.select(“element”)，这个就是jquery中的$()，只不过没有采用简写的形式。

　　创建并添加新元素到选定元素后：.append("element")，就是javascript中的append方法一样，他返回的是一个添加了该新元素的元素集。

　　设置或获取指定属性：.attr(name[, value])，同jquery中的attr()。

D3.js采用的是像jquery中的链式方法，在执行一个操作后可以继续调用其他的方法，但是，我们需要注意的是，前一个方法的输出类型必须要和下一个方法的输入类型相匹配！

　　选择所选的元素中的多个子元素组成新的选择集:selectAll("obj")，创建一个“空房子”--selection，这样我们可以往里面填充“家具”--数据。不过现在的选择集还没有插入到文档，因为我们还要给这些空的选择集加入数据是不是？

　　设置或获取一组元素的绑定数据：.data(dataset)，这样“空房子”分配“家具”了，D3会根据数据来进行合理的分配，分配好了，这些家具下一步是不是该搬进这些小房子了呢？

　　返回一个新的、绑定了数据的元素：.enter()， 这样子我们的之前创建的房子就可以使用了。他们在DOM中有了自己的位置，我们终于可以往他身上进行操作了！

　　设置HTML属性：.attr()

　　设置CSS样式：.style()

　　

D3.js学习记录的更多相关文章

  1. D3&period;js学习记录【转】【新】

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  2. D3&period;js学习记录 - 数据类型【转】【新】

    1.变量 JAVASCRIPT的变量是一种类型宽松的语言.定义变量不用指定数据类型.而且还是动态可变的. var value = 100;value = 99.9999;value = false;v ...

  3. 数据可视化的优秀入门书籍有哪些&comma;D3&period;js 学习资源汇总

    习·D3.js 学习资源汇总 除了D3.js自身以外,许多可视化工具包都是基于D3开发的,所以对D3的学习就显得很重要了,当然如果已经有了Javascript的经验,学起来也会不费力些. Github ...

  4. 我的three&period;js学习记录（二）

    通过上一篇文章我的three.js学习记录(一)基本上是入门了three.js,但是这不够3D,这次我希望能把之前做的demo弄出来,然后通过例子来分析操作步骤. 1. 示例 上图是之前做的一个dem ...

  5. 我的three&period;js学习记录（三）

    此次的亮点不是three.js的3d部分,而是通过调用摄像头然后通过摄像头的图像变化进行简单的判断后进行一些操作.上篇中我通过简单的示例分析来学习three.js,这次是通过上一篇的一些代码来与摄像头 ...

  6. vue&period;js学习记录

    vue.js学习记录 文章已同步我的github笔记https://github.com/ymblog/blog,欢迎大家加star~~ vue实例 生命周期 beforeCreate:不能访问thi ...

  7. D3&period;js学习（一）

    从今天开始我将和大家一起学习D3.js(Data-Driven Documents),由于国内关于D3的学习资料少之又少,所以我觉得很有必要把自己学习过程记录下来,供同学们参考,如果文章有有哪些表达有 ...

  8. D3&period;js学习笔记（六）——SVG基础图形和D3&period;js

    目标 在这一章,我们将会重温SVG图形,学习如何使用D3.js来创建这些图形. 这里会包括前面例子中的SVG基础图形以及如何使用D3.js设置图形的属性. 使用D3.js画一个SVG 的 圆 circ ...

  9. d3&period;js学习笔记（五）——将数据结构化为D3&period;js可处理的

    目标 在这一章,你将会理解如何对数据进行结构化,来更好的使用D3.js. 我们将会回顾我们之前已经学习的,学习D3.js如何使用选集(selections),JavaScript对象基础,以及如何最优 ...

随机推荐

  1. 剖析简易计算器带你入门微信小程序开发

    写在前面,但是重点在后面 这是教程,也不是教程. 可以先看Demo的操作动图,看看是个什么玩意儿,GitHub地址(https://github.com/dunizb/wxapp-sCalc) 自从微 ...

  2. 内存泄露 Memory Leaks

    什么是内存泄露 内存管理一直是Java 所鼓吹的强大优点.开发者只需要简单地创建对象,而Java的垃圾收集器将会自动管理内存空间的分配和释放. 但在很多情况下,事情并不那么简单,在 Java程序中总是 ...

  3. 设计模式-----观察者模式（Obsever）

    它定义了对象之间一对多的依赖关系.因此,.当一个对象的状态变化,对吸毒成瘾者,他将收到通知和更新自己主动. 观察者模式的组成: 抽象主题角色:把全部对观察者对象的引用保存在一个集合中.抽象主题提供一个 ...

  4. unity 在安卓个IOS平台上 同一个按钮 点击后实现不同的功能

    #if UNITY_IOS UIEventListener.Get(mSprites["Recharge"].gameObject).onClick = OnIOSRecharge ...

  5. 开源RPC（gRPC&sol;Thrift）框架性能评测

    海量互联网业务系统只能依赖分布式架构来解决,而分布式开发的基石则是RPC:本文主要针对两个开源的RPC框架(gRPC. Apache Thrift),以及配合GoLang.C++两个开发语言进行性能对 ...

  6. c&sol;c&plus;&plus; 网络编程 bind函数

    网络编程 bind函数 bind的作用是确定端口号. 正常处理都是先bind,然后listen 如果不bind,直接listen,会是什么结果? 内核会自动随机分配一个端口号 例子: #include ...

  7. Charles篡改后台数据

    1.打开Charles找到相对应的接口 2.在接口上右键选择Breakpoints打断点. 3.重新请求截断接口,Charles会多弹出一个截断窗口如下图(第一个修改请求的,第二图是修改返回的) 点击 ...

  8. 学习记录特别篇之sql，类的继承

    思路: 应用场景: 1.将父类当做一个基础类 大家都去继承该方法,以便少些代码 2.继承父类的方法 同时可以重写该方法时候调用父类原先的方法 实现一石二鸟的效果 即 既增加原先的功能 又新增新的功能 ...

  9. CCCC L2-017&period; 人以群分 贪心

    https://www.patest.cn/contests/gplt/L2-017 题解:贪心,一点小数学 坑:XJB改下标改错了 #include <iostream> #includ ...

  10. CentOS7系列搭建Openvpn

    环境:CentOS Linux release 7.3.1611 (Core) 查看os版本命令:[root@openvpn ~]# cat /etc/redhat-release 命令记录如下: y ...

相关文章