Three Little Circles

这一篇将简述如何使用选择操作元素
1.Selection Element
d3.selectAll()方法选取一个选择器字符,例如“circle”,然后返回一个匹配该选择器和陈述所有元素的选项。
`var circle = d3.selectAll("circle");`
在一个选项中,我们对于选择的元素可以做出不同的改变,例如,我们可以改变填充颜色和半径通过selection.style和selection.attr方法

`circle.style("fill",steelblue)`
`circle.attr("r",30);`

以上的设置属性和风格的代码是对所有选择元素设置相同值的。

我们可以通过匿名函数对每一个基本元素设置值,每个选定元素,函数将会求值一次,匿名函数在D3中被扩展使用来计算属性值,特别在尺度和形状的连结中,如设置圆x的坐标成一个随机值
`circle。attr("x",function(){return Math.random()*720;})`

2.Bingding Data

更普遍的,我们使用数据去驱动这个圆的外形,比方收我们想要这个圆表现这些数字,32,57和112,selection.data方法绑定这个数字到圆中
circle.data([32,57,112]);
数据被指定为数组值,这反映了选项的概念,每一个数组元素,在以上代码中,第一个数被绑定在第一个圆中(第一个元素,基于它们在DOM中的定义顺序),第二个数字被绑定在第二个圆中,等等。
在数据被绑定之后,它可以作为属性和样式风格函数的第一个参数来访问,按照惯例,我们通常使用d来引用绑定数据,使用数据设置半径。
`circle.attr("r",function(){return Math.sqrt(d);})`

第二个选项参数是对你可以使用的每一个函数:对于选项中的元素索引值,索引经常被用来定位序列元素,按照惯例,
它被引用作为i,例如
`circle.attr("cx",function(d,i){
return i*100+30;
}`

3.Entering Elements
4.要是我们有四个数字要展示,超过三个又怎样呢?我们将没有足够的园,我们需要创造更多的元素来陈述我们的数据,你可以手动添加一个新节点,但是一个更强大的方法是进入选项中通过加入数据来计算。
当加入数据到元素中的时候,D3放下任何剩下的元素,或者同等的遗失的在进入选项中的数据,对于仅仅三个圆,第四个圆将被放进这个进入选项中,因为其它的三个员将通过selection.data直接返回。
通过添加到这个enter选项,我们可以创造新的员对任何遗失的数据,这个新圆将被添加到这个已被定义元素中通过父选项,因此,我们首先选择svg元素,然后选择所有的circle元素,然后加入它们去生成数据
`var svg = d3.select("svg");

var circle = svg.selectAll("circle")
.data([32, 57, 112, 293]);

var circleEnter = circle.enter().append("circle");`

进入的元素早已经被绑定到数据上的,因此我们可以使用数据计算属性和样式,同时设置特征。
就拿这个逻辑极限来说,然后,要是我们没有存在的元素,比如也该空页,然后我们加入数据一个空选项中,所有的数据在进入的时候结束。
这个模式是很普遍的,你将经常看到selectAll+data+enter+append方法相继被地调用,一个接着一个,尽管它开始很普遍,注意着仅仅是数据进入的一个特殊例子。
svg.selectAll("circle").
data([data])
.enter.append("circle")
.attr("x",60)
.attr("y),functon(d,i){return i*100+30;})
.attr("r",function(d){return Math.sqrt(d);})

进入模式通常用链方法用来连结,其它的简略代码,因为D3方法返回它们表演的选项,你可以应用多个操作对同一个选项。

Exit Entering
通常情况下你会遇到来自enter相反的问题:你有太多存在的元素,你想移除它们当中的一些,你可以再次选择节点和手动移除它们,但是存在的选项通过数据进入计算更加强大。
退出选项是进入选项的反映,它包含的剩余元素是没有相符合的数据的

时间: 2024-10-13 02:20:16

Three Little Circles的相关文章

CSU 1412 Line and Circles

原题链接:http://acm.csu.edu.cn/OnlineJudge/problem.php?id=1412 题目要求判断是否有一条直线可以穿过所有的圆. 做法:把所有圆心做一次凸包,然后判断这个凸包是否能通过一个宽度为2*R的通道. 做法和求凸包直径差不多,只是判断的时候把点到两个端点的距离换成点到直线的距离. #include <stdio.h> #include <string.h> #include <math.h> #include <stdli

计数方法,博弈论(扫描线,树形SG):HDU 5299 Circles Game

There are n circles on a infinitely large table.With every two circle, either one contains another or isolates from the other.They are never crossed nor tangent.Alice and Bob are playing a game concerning these circles.They take turn to play,Alice go

Calling Circles

Description: If you've seen television commercials for long-distance phone companies lately, you've noticed that many companies have been spending a lot of money trying to convince people that they provide the best service at the lowest cost. One com

SPOJ CIRU The area of the union of circles

You are given N circles and expected to calculate the area of the union of the circles ! Input The first line is one integer n indicates the number of the circles. (1 <= n <= 1000) Then follows n lines every line has three integers Xi Yi Ri indicate

codeforces 600D Area of Two Circles&#39; Intersection

分相离,内含,想交三种情况讨论一下. 主要是精度和数据范围的问题,首先数据用long double,能用整型判断就不要用浮点型. 题目中所给的坐标,半径是整型的,出现卡浮点判断的情况还是比较少的. 最后算三角型面积的时候不要用海伦公式,有四个连乘很容易爆数据范围损失精度,即使拆开两两乘也要考虑符号 (取对数也是比较好的办法).(不知道sqrt和cos,sin的精度如何比较 #include<bits/stdc++.h> using namespace std; typedef long dou

11.3.4 例题11-4 UVA 247 Calling Circles (有向图的传递闭包)

题目大意: 给你n个人,m条边,a->b,b->a,才能说这两个人是联通的.问现在有多少个联通圈.输出每个联通圈.n<=25 解题思路: 直接建图,用有向图的闭包传递特性来处理每个人之间的联通关系.然后dfs一次,遍历邻接矩阵中与某个点相连的几个点,边遍历, 边打印输出. 代码: # include<cstdio> # include<iostream> # include<map> # include<cstring> # include

POJ 3808 Malfatti Circles(计算几何)

Malfatti Circles Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 250   Accepted: 125   Special Judge Description The con?guration of three circles packed inside a triangle such that each circle is tangent to the other two circles and to

[LeetCode] Friend Circles 朋友圈

There are N students in a class. Some of them are friends, while some are not. Their friendship is transitive in nature. For example, if A is a direct friend of B, and B is a direct friend of C, then A is an indirect friend of C. And we defined a fri

--uva247(calling circles)强联通与floyd-warshell

图论题:一开始我是用tarjan算法做的,wrong answer 了很多次,然后又用了floyd-warshell算法,也wa了 最后找了题解,原来最后的dataset后面不是组数,是样例的编号,题根本就没说,让人怎么理解... tarjan #include<stdio.h> #include<iostream> #include<string.h> #include<string> #include<map> #include<alg

HDOJ 5299 Circles Game 圆嵌套+树上SG

将所有的圆化成树,然后就可以转化成树上的删边博弈问题.... Circles Game Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/65536 K (Java/Others) Total Submission(s): 881    Accepted Submission(s): 255 Problem Description There are n circles on a infinitely large tabl