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

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


最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 1. Java基础部分 基础部分的顺序:基本语法,类相关的语法,内部类的语法,继承相关的语法,异常的语法,线程的语...
    子非鱼_t_阅读 31,766评论 18 399
  • 一. Java基础部分.................................................
    wy_sure阅读 3,836评论 0 11
  • 作者: 惟湛 如何调整ABAP程序的性能(copy) 7、两个内表添加使用批量增加代替逐行不推荐Loop at i...
    SmalltalkVoice阅读 7,604评论 7 18
  • 二零一六年十一月四号 看到表姐发的朋友圈得知外公去世了 随后我给老妈打电话 结果没人接 给老爸打电话 没人接 之后...
    你是我的走影阅读 192评论 0 0
  • 最近,老師拋給了我們一個課題。假諾可以去除你的兩項本性,你會選擇哪兩項?為什麼? 經過與朋友的討論,也終究得到了“...
    于予阅读 153评论 0 0