全部 android asp.net C/C++ cshap IOS Java javascript nodejs perl php python ruby web容器 其他 前端 数据库 第三方平台 混合式APP 网络 系统 默认分类

D3画图学习一

0 131

一、D3画图简介

    D3 是最流行的可视化库之一,它被很多其他的表格插件所使用。它允许绑定任意数据到DOM,然后将数据驱动转换应用到Document中。你可以使用它用一个数组创建基本的HTML表格,或是利用它的流体过度和交互,用相似的数据创建惊人的SVG条形图。原谅我上面这句是从网上抄的,语文不太好。反正说白了,D3就是一个用来在web界面画图的库。有了它我们画各种图形和坐标轴都更加方便了。

 

二、使用的基本函数

1. 元素选择函数

    在D3中对HTML元素选取主要用到select和selectAll两个函数。select用于选取单个元素,selectAll用于选取页面中所有的该元素。

    函数原型:d3.select()

    函数参数:HTML元素

    函数返回值:选择的HTML元素对象。

    示例: var  p = d3.select("p");   //选择页面中的第一个<p>元素

    函数原型:d3.selectAll()

    函数参数:HTML元素

    函数返回值:选择的HTML元素对象。

    示例: var p = d3.selectAll("p");  //选择页面中所有的<p>元素

    使用方式列举:

    (1)选取单个元素

<body>
    <p></p>
<body>

d3.select("p">
  .text("测试");    //输出:测试

    (2)选取所有元素

<body>
    <p></p>
    <p></p>
</body>

d3.selectAll("p")
    .text(function(v,i){
    return "测试" + i;
})
//输出: 测试0
//     测试1

    (3)根据id选取元素

<body>
    <p></p>
    <p id="ceshi"></p>
</body>

d3.select("#ceshi")
    .text("ID选取");    //输出:ID选取

    (4)根据class选取元素

<body>
    <p></p>
    <p class="ceshi"></p>
</body>

d3.select(".ceshi")
    .text("class测试");

 

2. 数据绑定函数

    (1)datum函数

    函数原型:datum()

    函数功能:绑定单个数据到选择集

    示例:

<body>
    <p></p>
    <p></p>
</body>

var  str = "ceshi"
 d3.selsetAll("body")
    .datum(str)
    .text (function(v,i){
    return "第" + i + "个元素是" + v;
})
//输出:
//第0个元素是ceshi
//第1个元素是ceshi

    (2)data函数

    函数原型:data()

    函数功能:将一个数组绑定到选择集

    示例:

<body>
    <p></p>
    <p></p>
</body>

var  str = ["ceshi", "data"]
 d3.selsetAll("body")
    .datum(str)
    .text (function(v,i){
    return "第" + i + "个元素是" + v;
})
//输出:
//第0个元素是ceshi
//第1个元素是data

 

3. 元素添加函数

    函数原型:append()

    函数功能:在选择集后面添加元素

    示例:

<body>
    <p>段落1</p>
</body>

d3.select(p)
    .append("p")
    .text("段落2");
//显示:
//段落1
//段落2

    函数原型:insert()

    函数功能:在选择集前面添加元素

    示例:

<body>
    <p>段落1</p>
</body>

d3.select(p)
    .insert("p")
    .text("段落2");
//显示:
//段落2
//段落1

 

4. 元素移除函数

    函数原型:remove()

    函数功能:移除元素

    示例:

<body>
    <p>段落1</p>
    <p>段落2</p>
</body>

d3.select(p)
    .remove();
//显示:
//段落2

    这章就先介绍到这里,下一章将会将一些基本图形的画法。有点累了,下班回家。

 

热忱回答0