初识d3.js(1)

最新推荐文章于 2022-07-05 10:35:18 发布

枫思然

最新推荐文章于 2022-07-05 10:35:18 发布

阅读量191

点赞数

分类专栏： js d3.js 文章标签： d3.js

本文链接：https://blog.csdn.net/qq_38318589/article/details/102413664

版权

js 同时被 2 个专栏收录

24 篇文章 2 订阅

订阅专栏

d3.js

2 篇文章 0 订阅

订阅专栏

1.获取元素

let box = d3.select("#box");  // select选取单个元素
let boxs = d3.selectAll(".boxs");// selectAll选取单个元素

2.data

let arr = [1,2,3];
let boxArr = boxs.data(arr);
//data:把数据写入到对应的DOM节点中，且后边的方法都可以使用数组中的数据

注：data方法只能把数组的内容写入到DOM节点；

单个元素使用datum()方法；

3.text

/*
boxArr.text(function(v){
    return v;
});
*/

//用箭头函数写如下：
boxArr.text(v => v);
//text把数据返回在页面上，第一个参数V代表的是data对应的数组中的数据；text（可以写入固定内容）

4.style

添加样式

style( ); ( )括号里可以写样式或对象（多个样式时），同jQuery；

注：不能用驼峰命名规则，用-连接，如：font-size

5.链式操作~

d3.selectAll('.boxs').style({'color':'red','font-size':'30px'}).data(arr).text( v => v);

6.追加、移除元素

（1）append()追加子元素到末尾；

（2）insert（）追加元素到某一元素的前面，如：

insert（追加的元素，被追加到的某一元素的前面）；

（3）remove（）移除元素

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>d3基础</title>
    <script src="./d3/d3.js"></script>
</head>
<body>
    <div id="b"></div>
    <div class="bs"></div>
    <div class="bs"></div>
    <div class="bs"></div>
</body>
<script>
    let b = d3.select("#b");             //select选取单个元素
    let bs = d3.selectAll(".bs");        //selectAll选取单个元素
    let arr = [1, 2, 3];
    let boxArr = bs.data(arr);
    boxArr.text(v => v);

    d3.select("body").append("div").style("color","red").text("这是追加的");
    d3.select("body").select("div","#b").style("color","#e8e").text("这也是追加上的");
</script>
</html>

7.enter()

当数据的个数大于DOM节点时，多余的数据就存在enter中。

使用enter+append可以只操作数组就可以变动视图，动态添加数据。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="d3/d3.js"></script>
    <style>
        *{margin: 0;padding: 0;}
    </style>
</head>
<body>
    <div class="boxs"></div>
    <div class="boxs"></div>
</body>
</html>
<script>
    let arr = [1,2,'a','b','c'];
    let boxs = d3.selectAll('.boxs').data(arr).text(v => v);

    //当数据的个数大于DOM节点的个数时,多余出来的数据就存在enter
    let enter = boxs.enter();
    console.log(enter);

    enter.append('div').text(v => v);
</script>

8.exit()

当DOM元素的数量大于数据的个数时，多余的DOM元素存在exit中。

使用exit+remove（）可以移除多余的DOM元素；

 let arr = [1,2,3];
    let boxs = d3.selectAll('.boxs').data(arr).text(v => v);

    //当DOM元素的个数大于数据的个数时,多余出来的DOM元素存在exit中
    let exit = boxs.exit();
    console.log(exit);

    exit.remove();