您的位置：首页 > Web前端 > JavaScript

d3.js选择、插入、删除元素

2017-04-14 10:45 267 查看

我们还可以根据dom属性id class进行元素选择。

var p2 = body.select("#myid");
p2.style("color","red");

var p = body.selectAll(".myclass");
p.style("color","red");

插入元素

插入元素涉及的函数有两个：
append()：在选择集末尾插入元素
insert()：在选择集前面插入元素

删除元素

删除一个元素时，对于选择的元素，使用 remove 即可，例如：

var p = body.select("#myid");
p.remove();

如此即可删除指定 id 的段落元素。
下面我们用一个demo说明：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<script src="../libs/d3.min.js" charset="utf-8"></script>
</head>
<body>
<p id="myid">Apple</p>
<p class="pClass">Pear</p>
<p class="pClass">Banana</p>
</body>
</html>

</body>
</html>

<script>
var body = d3.select("body");
var p1 = body.select("#myid");
p1.style("color","red");

var p23 = body.selectAll(".pClass");
p23.style("font-size","72px").style("color","blue");

/*
插入元素涉及的函数有两个：
append()：在选择集末尾插入元素
insert()：在选择集前面插入元素
*/

body.append("p")
.text("append p element1").style("color","yellow");

body.insert("p","#myid")
.text("insert p element");

var p = body.select(".pClass");
p.remove();

</script>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航