D3系列05-程序中数据的插入和删除。

2015-12-06  本文已影响314人  Kenis

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中的标签元素对象化。从对象的角度来操作标签元素。

上一篇 下一篇

猜你喜欢

热点阅读