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

2024-01-27 18:36:10

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、元素操作：

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、修改元素属性值

　　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');

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 注意此函数都要有返回值。

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>

页面中输出的结果如下图：


5、元素删除
这个简单  如：

d3.select('p').remove();  删除匹配的第一个p元素。

码农公寓

相关文章