1.先利用选择器获取选择集,如,
var body = d3.select("body"); --表示body中所有的元素。
2.在body的最后插入一个元素p,
body.append("p").text("add a element");
3.假设body中第一个元素是一个id=“first”的p元素,如,
<p id="first">twj</p>;
则下面的代码可以在p的前面插入另一个p标签,
body.insert("p","#first").text("add another ele");
4.删除元素。
先选中某个元素,
var firstEle = body.select("#first");
再移除这个元素,
firstEle.remove();
简单小结:
01.d3的选择器,可以是根据标签来选择,如,
d3.select("body"); --选择body下点所有元素集
d3.select("body").selectAll("p");--选择body下所有的p元素
也可以根据元素的id来进行选择,写法如下,
d3.select("#firstId");
也可以根据元素的类型来进行选择,如,
d3.select(".firstClass");
...
02.选择了元素后,就可以进行增加(分为追加-append和插入-insert两种)和删除操作。
03.这种操作的方式是基于HTML的DOM模型。DOM模型是将HTML中的标签元素对象化。从对象的角度来操作标签元素。