可视化工具D3.js教程入门（第四章）—— 选择插入删除_web 数据可视化元素添加删除怎么弄-CSDN博客

本文链接：https://blog.csdn.net/weixin_44867717/article/details/120417355

可视化工具D3.js教程入门（第四章）—— 选择插入删除

1、选择元素

第一章有说过 d3.select() 和 d3.selectAll() ; 这两个方法的选择器与jQuery的元素、属性、css选择器使用方法基本一样，下面我们就说下他们的区别；

d3.selectAll() ；选择的是所有匹配到的元素；

d3.select(‘.calss’)、d3.select(‘#id’)、d3.select(‘div’)、d3.select(‘[name=“zh”]’) 等都是选择匹配到的第一个元素，

如下；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>hello</title>
    <script src="https://d3js.org/d3.v5.min.js"></script>
</head>
<body>

<h3>第一个</h3>
<h3>第二个</h3>
<h3>第三个</h3>
<h3>第四个</h3>
<h3>第五个</h3>


</body>
<script>

    var h3 = d3.select('h3')
    h3.datum('我把内容改了看一下').text(function (d,i) {
        return d;
    })
    console.log(h3);
    //输出结果
//    我把内容改了看一下
//    第二个
//    第三个
//    第四个
//    第五个

</script>
</html>

效果

在这里插入图片描述

2、元素操作：

2.1、修改元素内容

selection.text([value]);
　　selection.html([value]);

selection表示与选择器匹配的选择集。
　　value表示可选参数。如果value存在，则修改其值，如果不存在，则返回已经存在的内容，如下。

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

<head>
    <meta charset="UTF-8">
    <title>hello</title>
    <script src="https://d3js.org/d3.v5.min.js"></script>
</head>

<body>

    <h3>第一个</h3>
    <h3>第二个</h3>
    <h3>第三个</h3>
    <h3>第四个</h3>
    <h3>第五个</h3>


</body>
<script>

    var h3 = d3.select('h3')
    var text = h3.datum('我把内容改了看一下').text();
    var html = h3.datum('我把内容改了看一下').html();
    console.log(text);
    console.log(html);
    //控制台输出结果如下：
    //第一个
    //第一个
    h3.datum('我把内容改了看一下').text(function (d, i) {
        return '<p>' + d + '</p>';
    });
    //    执行到这里 页面展示内容如下：
    //    <p>我把内容改了看一下</p>
    //    第二个
    //    第三个
    //    第四个
    //    第五个


    h3.datum('我把内容改了看一下').html(function (d, i) {
        return '<p>' + d + '</p>';
    });
//    执行到这里 页面展示内容如下：   这里在页面的第一个h3标签里  确实插入了一个p标签
//    我把内容改了看一下
//    第二个
//    第三个
//    第四个
//    第五个

</script>

</html>

效果

在这里插入图片描述

2.2、修改元素属性值

selection.attr(name[, value]);
　　selection.property(name[, value]);

这两个方法是修改对应属性name的属性值value的；

如果没有属性值value参数，则是获取属性名为name的属性值；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>hello</title>
    <script src="https://d3js.org/d3.v5.min.js"></script>
</head>
<body>

<h3>第一个</h3>
<p  title="23℃">第二个</p>



</body>
<script>

    var h3 = d3.select('h3');
    var p = d3.select('p');
    h3.attr('title','我是一个h3标签');//页面中鼠标滑过 显示 '我是一个h3标签'
    console.log(p.attr('title'));//控制台输出 23℃


</script>
</html>

效果

在这里插入图片描述

selection.style(name[, value[, priority]]);

这个方法可以返回或修改style，priority默认为null，你可以在这个地方写“important”。

 var h3 = d3.select('h3');
 h3.style('font-size','36px');

2.3、添加、移除元素 calss方法

selection.classed(names[, value]);

names:class

value: true（添加calss）/ false（移除calss）

如果不传第二个value参数，那么selection.classed(names) 返回的就是——

true（此元素包含这个names类）/ false（此元素包不包含这个names类）；

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

<head>
    <meta charset="UTF-8">
    <title>hello</title>
    <script src="https://d3js.org/d3.v5.min.js"></script>
    <style>
        .red {
            color: red;
        }
    </style>
</head>

<body>
    <h3 class="red">第一个</h3>
    <p title="23℃">第二个</p>
</body>
<script>
    var h3 = d3.select('h3');
    console.log(h3.classed('red'));//输出结果  true
    h3.classed('red', false);//这里移除 red
    console.log(h3.classed('red'));//输出结果  false
</script>

</html>

效果

在这里插入图片描述

注：

上面所述的所有方法参数value 都可以传入一个函数 function（d,i）{ };

用法如同本文第一个例子 .text（）所示，但是如果传递function 注意此函数都要有返回值。

2.4、插入元素

append()：在选择集尾部插入元素

insert()：在选择集前面插入元素

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

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://d3js.org/d3.v5.min.js"></script>

</head>

<body>

    <p>原有的p标签</p>

</body>

<script>

    var bd = d3.select('body');
    bd.append('div').text('我是在body标签内部最后append追加的div元素');
    bd.insert('h3', 'p').text('我是在p标签前边insert插入的h3元素');
</script>

</html>