D3.js学习记录

<!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()

原文地址:https://www.cnblogs.com/magic-xxj/p/9186386.html

时间: 2024-10-09 06:07:23

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

d3.js学习11

单元素动画transition().duration(duration) var body = d3.select("body"), duration = 5000; body.append("div") .classed("box",true) .style("background-color","#e9967a") .transition() .duration(duration) .style(&qu

d3.js学习笔记

入门好文:http://www.ourd3js.com/wordpress/?p=51 d3.js和d3.min.js内容一样,后者是压缩过的,适合发行版本,前者适合开发人员. 1.选择集(满足css选择符的要求)主要和数据绑定一起使用 d3.select() d3.selectAll() var body = d3.select("body") 2.数据绑定(实质就是在选择集的元素对象里面添加一个变量,并赋值) p.text(function(d,i)){return d+"

d3.js学习笔记(1)

很早之前就知道d3,当初看到它的时候,第一反应就是"我去,怎么这么炫酷",但是一直没有学(自己太懒了),最近可能是五月病犯了,不想看书,不想写代码,不想看论文,不想写论文,虽然什么事情都不想做,不过还是找点事情做吧,那就学学d3呗,说不定将来什么时候就用到了呢. 这篇博客主要从源码的角度去学习,所以对于没有接触过d3的朋友,请先看完下面的资料. 学习资料 学习嘛,当然得找到好的资料咯,下面是我昨天看的一些文章,在d3的github上都能够找到,毕竟最好的学习资料就是官网的文档.教程和源

d3.js学习9

d3.js数据可视化实战手册 学习笔记 插值器Interpolation 给定值域,往中间填值并打印出来 字符插值 var data=[]; var sizeScale=d3.scale.linear() .domain([0,9]) .range([ "italic bold 12px/30px Georgia, serif", "italic bold 120px/180px Georgia, serif" ]); for(var i=0;i<10;i++

d3.js学习

画svg图像 1.添加svg元素 2.添加g元素,g元素是一个分组的元素,相当于html中的div元素 3.画图像 4.画坐标轴 ----------------------------------------------------------------------------- d3画闲线性曲线例子 html: <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8&

d3.js学习1

官网: http://d3js.org/ 范例: https://github.com/mbostock/d3/wiki/Gallery 引用: //在线引用 <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script> //或下载到本地 <head> <meta charset="utf-8"> <title>

d3.js学习3

Enter-update-exit模式 select.data(data),代表selection图形与data数据的交集->Update Mode select.data(data).enter(),代表data数据排除selection图形与data数据的交集->Enter Mode select.exit,移除所有数据,代表selection图形的部分->Exit Mode E-U-E即为d3.js的基础 数组数据绑定 var data=[10,15,24,46,13,6,96,1

d3.js学习6

加载server数据d3.json(url,callback) 首先准备一些json数据,将上一篇的js数据转化为json格式并存储 var data=[ {expense:10,category:"Retail"}, {expense:15,category:"Gas"}, {expense:30,category:"Retail"}, {expense:50,category:"Dining"}, {expense:80,

js学习记录

比较运算符 当我们对Number做比较时,可以通过比较运算符得到一个布尔值: 2 > 5; // false 5 >= 2; // true 7 == 7; // true 实际上,JavaScript允许对任意数据类型做比较: false == 0; // true false === 0; // false 要特别注意相等运算符==.JavaScript在设计时,有两种比较运算符: 第一种是==比较,它会自动转换数据类型再比较,很多时候,会得到非常诡异的结果: 第二种是===比较,它不会自