D3.js 选择

Posted 2023-04-05

参考技术A

D3 可以选择一些 html 或 SVG 元素并更改它们的样式和/或属性： d3.select 和 d3.selectAll 。

这两个函数都将字符串作为其唯一参数。该字符串指定要选择的元素，并采用 CSS 选择器字符串的形式（例如 div.item ， #my-chart 或 g:first-child ）。

[//]: .classed 是一个 boolean.

除了将常量值传递给 .style , .attr , .classed , .property ,之外 .text ， .html 您还可以传入一个函数。例如：

该函数接受两个参数，通常命名为 d 和 i 。第一个参数 d 是 连接数据 （或“数据”）。 i 是选择中元素的 索引 。

此方法有两个参数：第一个是指定事件类型的字符串;第二个是触发事件时调用的函数（“回调函数”）。此回调函数有两个参数，通常命名为 e 和 d 。 e 是 DOM 事件对象并且 d 是连接数据。

最常见的事件包括（有关详细信息，请参阅 MDN 事件参考）：

在事件回调函数中， this 变量绑定到触发事件的 DOM 元素。这使我们能够执行以下操作：

[//]:这 this 是一个 DOM 元素，而不是 D3 选择，因此如果您想使用 D3 修改它，您必须首先使用 d3.select(this) .

.append 可以使用 D3和 .insert 方法将元素添加到选择的元素中。可以使用 删除元素 .remove 。

.append 将一个元素附加到选择中的每个元素。如果元素已经有子元素，则新元素将成为 最后一个子元素 。第一个参数指定元素的类型。

.insert 类似于 .append 但它允许我们指定第二个参数， 该参数指定（作为 CSS 选择器）在哪个元素之前插入新元素 。

.remove 从页面中 删除选择中的所有元素 。例如，给定一些圆圈，您可以使用以下方法删除它们：

大多数选择方法的返回值是选择本身。这意味着诸如 和 之类的选择方法 .style 可以 .attr 链接 .on 起来。例如：

该 .each 方法允许您为 选择的每个元素 调用一个函数。

回调函数有两个参数，通常命名为 d 和 i 。第一个参数 d 是 连接数据 。 i 是选择中元素的 索引 。 this 关键字是指选择中的当前 HTML 或 SVG 元素。

这是一个示例， .each 用于为每个选择的元素调用函数。该函数计算索引是奇数还是偶数，并相应地修改圆：

该 .call 方法允许调用一个函数， 选择本身 作为第一个参数传递给该函数。

.call 在您想要对选择进行操作的可重用函数时很有用。

例如， colorAll 获取一个选区并将选区元素的填充设置为橙色：

您可以使用 D3 的 .filter 方法过滤选择。第一个参数是一个函数，它返回 true 是否应该包含元素。过滤的选择由该 filter 方法返回，因此您可以继续链接选择方法。

在此示例中，您过滤偶数元素并将它们着色为橙色：

通过调用 .sort 和传入比较器函数对选择中的元素进行排序。比较器函数有两个参数，通常是 a 和 b ，它们代表被比较的两个元素的数据。如果比较器函数返回负数， a 将放在前面 b ，如果是正数， a 将放在后面 b 。

cocos2d-x JS 利用重复动作实现动画播放(实现倒计时)

cocos2d-js: cc.delayTime() and cc.repeatForever() don‘t work together in cc.sequence()  

 

 

 1          this.numm = 100; //设置倒计时总数为100    
 2         
 3  　　　　　var act = cc.sequence(cc.callFunc(function() {
 4 
 5                 //在这里面可自定义事件（在此我以倒计时为例）
 6 
 7                 this.numm --;
 8                 this.table_time.setString(this.numm);//赋值到标签对象
 9                 if(this.numm <= -1){//加个判断避免出错
10                    
11                       this.table_time.setString("0");
12            
13                 }
14             }, this), cc.delayTime(1));  //延时一秒  
15             this.runAction(cc.repeat(act, 100));  //重复动作，这里100为执行100次