D3选择集训练

基本上包括常用的了。

<!DOCTYPE html>

<body>
    <p>Paragraph 1</p>
    <p>Paragraph 2</p>
    <p>Paragraph 3</p>
    <p id="para"> This is a Paragraph</p>
    <input id="fname" type="text" name="fullname" />
    <p id="test">This <span>is</span> a Paragraph</p>
    <div>
        <p>Car</p>
        <p id="plane">Plane</p>
        <p >Ship</p>
    </div>

</body>

<script src="d3.v3.min.js" charset="UTF-8"></script>
<script>
    var paragraphs = d3.selectAll("p");
    console.log(paragraphs.empty());
    console.log(paragraphs.node());
    console.log(paragraphs.size());
    d3.select("p").attr("class", "red bigsize");
    d3.select("p").classed("red", true);
    d3.select("p").classed("bigsize", false);
    paragraphs.style("color", "red");
    console.log(d3.select("p").classed("bigsize"));
    d3.select("#fname").property("value", "LiSi");
    console.log(d3.select("#test").text());
    console.log(d3.select("#test").html());

    var div = d3.select("div");
    div.append("p").text("Train");
    div.insert("p", "#plane").text("Bike");
    var plane = d3.select("#plane");
    plane.remove();
</script>

原文地址:https://www.cnblogs.com/aguncn/p/12388311.html

时间: 2024-08-30 17:39:00

D3选择集训练的相关文章

D3选择集处理的update,enter及exit模板

可以适应不同的数量. <!DOCTYPE html> <body> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <div id="enter"></div> <div id="exit"> <p><

【 D3.js 选择集与数据详解 — 4 】 enter和exit的处理方法以及处理模板

绑定数据之后,选择集分为三部分:update.enter.exit.这三部分的处理办法是什么呢?本文将讲解其处理方法,以及一个常用的处理模板. 1. enter的处理方法 如果没有足够的元素,那么处理方法通常是使用append()添加元素.请看下面的代码: <body> <p></p> <script> var dataset = [3, 6, 9]; var p = d3.select("body").selectAll("p

【 D3.js 选择集与数据详解 — 3 】 绑定数据的顺序

data() 函数有两个参数,第一个是被绑定数据,第二个参数用于指定绑定的顺序.在数据需要更新的时候常常会用到. 默认的情况下,data()函数是按照索引号依次绑定数组各项的.第0个元素绑定数组的第0项,第1个元素绑定数组的第1项,依此类推.也可以不按照此顺序进行绑定,这就要用到data()的第二个参数.这个参数是一个函数,称为键函数(key function). 要注意,只有在选择集原来已经绑定有数据的情况下,才能使用键函数指定绑定的顺序.请看以下代码: <body> <!-- 三个空

【 D3.js 选择集与数据详解 — 2 】 使用data()绑定数据

D3 中绑定数据大多是由 data() 函数来完成的,它是怎样工作的,它与 datum() 有什么区别呢? data()函数能够将数组各项分别绑定到各元素上,而且能够设置绑定的规则.data()还能够处理数组长度与元素数量不一致的情况.当数组长度大于元素数量,能为多余数据预留元素位置,以便将来插入新元素:当数组长度小于元素数量时,能提供指向多余元素的方法,以便将来删除.下面来剖析data()是如何绑定数据的,相比datum()有哪些新功能. data()的工作过程 假设body中有三个段落元素p

【 D3.js 选择集与数据详解 — 5 】 处理模板的应用

在[选择集与数据 - 4]一文中,介绍了一个update.enter.exit的处理模板,这个模板很常用,本文将通过一个例子来讲解其使用方法. 1. 模板 复习一下上一章提到的模板. //绑定数据后,分别返回update.enter.exit部分 var update = selection.data(dataset); var enter = update.enter(); var exit = update.exit(); //1.update部分的处理方法 update.text( fun

【 D3.js 选择集与数据详解 — 1 】 使用datum()绑定数据

选择集和数据的关系是 D3 最重要的基础,在[入门 - 第 7 章]时进行过些许讲解,对于要掌握好 D3 是远远不够的.故此开设一个新的分类,专门讨论选择集与数据的关系,包括数据绑定的使用和工作原理,update .enter.exit 的原理和使用方法等,接下来一段时间里会有多篇此类文章. D3 最大的特色就是能够将数据绑定到DOM上.使用select或selectAll选择元素之后,被选择的元素上是没有数据的.数据绑定就是使被选择元素里包含有数据.与此相关的函数有两个: datum():将指

jQuery -&gt; 使用andSelf()来包含之前的选择集

当我们使用Destructive Method对wrapper set进行选择.过滤之后会产生一个新的结果集.例如: html $lt;div$gt; $lt;p$gt;Paragraph$lt;/p$gt; $lt;p$gt;Paragraph$lt;/p$gt; $lt;/div$gt; 对于上面的DOM Tree,当然可以使用 $('div').find('p') 来获取所有div元素包含的p元素,但是选择结果中肯定不包含div元素自身. 如果在find之后链式调用andSelf()则可以

根据要素选择集,创建新图层

转自原文 根据要素选择集,创建新图层 IFeatureLayer featureLayer = new FeatureLayerClass();                     featureLayer.FeatureClass = featureClass; IFeatureSelection featureSelection = featureLayer as IFeatureSelection;                     IQueryFilter queryFilte

ArcEngine中IMap的选择集刷新问题

1.问题描述 通过以下方式可以很便捷的往选择集内添加要素,但是却无法触发AxMapControl下的OnSelectionChanged事件. public static void SelectFeatures(IFeatureLayer featureLayer, int[] OIDs) { if (pFeatureLayer == null || OIDs == null) { return; } IFeatureSelection featureSelection = featureLay