缩放
最后更新于：2022-04-01 11:12:35
> [Wiki](Home) ▸ [[API--中文手册]] ▸ [[行为]] ▸ **缩放**
* 如发现翻译不当或有其他问题可以通过以下方式联系译者:
* 邮箱：zhang_tianxu@sina.com
* QQ群：[D3数据可视化](http://jq.qq.com/?_wv=1027&k=ZGcqYF)205076374，[大数据可视化](http://jq.qq.com/?_wv=1027&k=S8wGMe)436442115
该行为会自动在容器元素中创建事件监听器来处理元素的缩放和平移动作，可支持鼠标事件和触摸事件。
# d3.behavior.zoom()
构造一个新的缩放行为。
# zoom(selection)
应用缩放行为到指定的选择器selection，注册所需的事件监听器，支持缩放和拖拽行为。
# zoom.translate([translate])
指定当前的缩放平移向量为translate；如果未指定translate，返回当前平移向量，默认：[0, 0]。
# zoom.scale([scale])
指定当前的缩放比例，如果未指定scale，则返回当前的缩放比例，默认为1。
# zoom.scaleExtent([extent])
指定缩放比例的允许范围为一个包含两个数值元素的数组，[minimum, maximum]；如果未指定extent，则返回当前的比例范围，默认为：[0, Infinity]。
# zoom.center([center])
如果指定了center ，为鼠标滚轮设置缩放的焦点（focal point [x, y]）为center ，并返回当前的缩放行为对象；如果未指定center ，则返回当前的缩放焦点，默认为null；一个为null的缩放焦点即：是以当前鼠标指针为缩放焦点。
# zoom.size([size])
如果指定了size，设置视窗大小为指定的尺寸size（[width, height]），并返回当前的缩放行为对象；如果未指定size，返回当前的视窗大小，默认为：[960, 500]；size是支持在平移时平滑的进行缩放行为。
# zoom.x([x])
指定x比例，并且它的定义域会在缩放时自动调整；如果未指定[x]，返回当前的x缩放，默认为null；如果缩放的定义域或范围是通过函数修改的，则这个函数应该被再次调用。设置x比例，并重置缩放比例为1，平移为[0, 0]。
# zoom.y([y])
指定y比例，并且它的定义域会在缩放时自动调整；如果未指定[y]，返回当前的y缩放，默认为null；如果缩放的定义域或范围是通过函数修改的，则这个函数应该被再次调用，设置y比例，并重置缩放比例为1，平移为[0, 0]。
# zoom.on(type, listener)
注册监听器listener来接收指定事件类型type的缩放行为；支持的事件类型有：
zoomstart - 缩放开始时 (e.g., touchstart)；
zoom - 缩放行为发生时 (e.g., touchmove)；
zoomend - 缩放行为结束时 (e.g., touchend)；
如果相同的事件类型已经指定了监听器，则首先会移除老的监听器，在加入新的监听器；要给一个事件类型注册多个监听器，则可以使用事件类型加命名空间后缀的形式，如："zoom.foo" 和 "zoom.bar"；想要移除监听器，只需要传入null即可；
对于鼠标滚轮事件，针对浏览器而言是没有明确的结束和开始通知的，在50毫秒内的多个事件会被分组到单个缩放中；如果想要更好的处理该种滚轮类型，请参考您的浏览器厂商，来获得更好的支持；
事件发生时，d3.event中会包含以下属性：
scale - 一个数值，即当前的比例；
translate - 一个含有两个数值元素的数组，代表平移向量。
# zoom.event(selection)
如果selection是一个选择器，立刻给注册的监听器分派一个缩放动作，作为三个时间序列：zoomstart，zoom 和 zoomend；这可以在设置了平移或比例后立刻触发监听器；如果selection是一个平移（transition），注册适当补间，使得缩放行为在过渡的过程中分派事件：zoomstart 事件发生在此前设定的视图平移开始时，zoom 事件则时刻发生在平移transition中，zoomend 事件则发生在平移transition结束时；注意：如果用户开始一个新的缩放行为前，之前的缩放行为动画会被立刻中断。
* 魏飞T20141125
* guluP20141208 2014-12-8 22:21:03
拖动
最后更新于：2022-04-01 11:12:33
> [Wiki](Home) ▸ [[API--中文手册]] ▸ [[行为]] ▸ **拖动**
* 如发现翻译不当或有其他问题可以通过以下方式联系译者:
* 邮箱：zhang_tianxu@sina.com
* QQ群：[D3数据可视化](http://jq.qq.com/?_wv=1027&k=ZGcqYF)205076374，[大数据可视化](http://jq.qq.com/?_wv=1027&k=S8wGMe)436442115
该行为会自动创建事件监听器来处理元素的拖动，可支持鼠标事件和触摸事件。
# d3.behavior.drag()
构造一个新的拖拽行为；
# drag.on(type[, listener])
注册指定的监听器listener 来接收拖动行为中指定类型type的事件；如果监听器listener 未指定，则为指定的类型type的事件返回当前已注册的监听器（事件类型可能包含命名空间，查看详细参见： dispatch.on），可支持的事件类型包括：
dragstart - 拖动开始时；
drag - 拖动移动时；
dragend - 拖动结束时（放下时）；
拖动事件（除了dragstart 和dragend）使用x和y属性来表示本地坐标系中拖动行为当前位置；默认情况下，这个位置即是鼠标（或触摸）的位置，然而，这个位置可以通过指定一个原点修改；拖动事件同时也提供dx和dy属性来表示鼠标的“瞬时”偏移量（相对于上一时刻的偏移：正数或负数），这两个属性有时比指定一个明确地原点更方便。
在拖动的动作中，一些浏览器的默认动作会自动被阻止（如：选择文本），另外，点击事件的默认行为随即变成一个非空拖动动作也会被禁止，以便允许链接的拖动。当在可拖动元素中注册了点击事件，你可以这样来检查click事件是否被禁止：
selection.on("click", function() {
if (d3.event.defaultPrevented) return; // click suppressed
console.log("clicked!");
});
当拖拽事件结合其他事件一起使用时，你可以考虑阻止源事件，来避免多个动作的发生：
drag.on("dragstart", function() {
d3.event.sourceEvent.stopPropagation(); // silence other listeners
});
# drag.origin([origin])
如果指定了原点origin ，设置原点访问器为指定的函数；如果未指定原点origin ，则返回当前原点访问器，原点默认为null；
原点访问器函数被用来确定拖拽开始时的起始位置，这就允许拖拽行为保存鼠标位置相对于开始元素位置的偏移量；如果原点访问器为空，元素位置被设置为鼠标位置时可能会有明显的跳动；如果指定了原点访问器，该函数会在鼠标被按下时调用，该函数会像其他函数调用方式一样被调用，即：会传递当前元素的数据d和元素索引i，还有this上下文代表当前点击的DOM元素；要访问当前发生的事件，可以使用d3.event；指定的原点访问器必须返回一个包含被拖动元素开始坐标x和y的对象；
原点访问器常常指定为恒等函数：function(d) { return d; }，当前元素已绑定了一个包含坐标位置x和y的对象时是最合适的，详细参见： http://bl.ocks.org/1557377。
* 魏飞T20141125
* guluP20141208 2014-12-8 21:53:51
d3.behavior (行为)
最后更新于：2022-04-01 11:12:30
> [Wiki](Home) ▸ [[API--中文手册]] ▸ **行为**
参见：
* [[Drag|拖动]] — 拖动。
* [[Zoom|缩放]] — 缩放。
凸包
最后更新于：2022-04-01 11:12:28
> [Wiki](Home) ▸ [[API Reference]] ▸ [[Geometry]] ▸ **Hull Geom**
<a name="hull" href="Hull-Geom#hull">#</a> d3.geom.<b>hull</b>()
<a href="http://bl.ocks.org/mbostock/4341699"><img src="img/thumbnail.png" width="202"></a>
Create a new hull layout with the default *x*- and *y*-accessors.
<a name="_hull" href="Hull-Geom#_hull">#</a> <b>hull</b>(<i>vertices</i>)
Returns the convex hull for the specified *vertices* array, using the current x- and y-coordinate accessors. The returned convex hull is represented as an array containing a subset of the input vertices, arranged in counterclockwise order (for consistency with [polygon.clip](Polygon-Geom#clip)).
Assumes the *vertices* array is greater than three in length. If *vertices* is of length <= 3, returns [].
<a name="x" href="Hull-Geom#x">#</a> hull.<b>x</b>([<i>x</i>])
If *x* is specified, sets the x-coordinate accessor. If *x* is not specified, returns the current x-coordinate accessor, which defaults to:
```js
function(d) { return d[0]; }
```
<a name="y" href="Hull-Geom#y">#</a> hull.<b>y</b>([<i>y</i>])
If *y* is specified, sets the y-coordinate accessor. If *y* is not specified, returns the current y-coordinate accessor, which defaults to:
```js
function(d) { return d[1]; }
```
多边形
最后更新于：2022-04-01 11:12:26
> [Wiki](Home) ▸ [[API--中文手册]] ▸ [[几何]] ▸ **多边形**
* 如发现翻译不当或有其他问题可以通过以下方式联系译者:
* 邮箱：zhang_tianxu@sina.com
* QQ群：[D3数据可视化](http://jq.qq.com/?_wv=1027&k=ZGcqYF)205076374，[大数据可视化](http://jq.qq.com/?_wv=1027&k=S8wGMe)436442115
# d3.geom.polygon(vertices)
返回顶点的输入数组，并且附有一些其他方法，如下面所描述
# polygon.area()
返回此多边形的标定区域。如果顶点是逆时针顺序，面积为正，否则为负。
# polygon.centroid()
返回一个表示此多边形的质心的两元素数组。
# polygon.clip(subject)
对这个多边形剪切主题多边形。换句话说，返回一个多边形表示这个多边形和主题多边形的交集。假定剪切的多边形是逆时针方向以及凸多边形。
* 谁浮T20141125
* guluP20141208 2014年12月8日 21:07:33
四叉树
最后更新于：2022-04-01 11:12:24
> [Wiki](Home) ▸ [[API--中文手册]] ▸ [[几何]] ▸ **四叉树**
* 如发现翻译不当或有其他问题可以通过以下方式联系译者:
* 邮箱：zhang_tianxu@sina.com
* QQ群：[D3数据可视化](http://jq.qq.com/?_wv=1027&k=ZGcqYF)205076374，[大数据可视化](http://jq.qq.com/?_wv=1027&k=S8wGMe)436442115
四叉树是一个二维空间递归细分。它使用了平分划分实现，将每一个块平分成了四个同等大小的方块。每个点存在于一个唯一的节点中；如果同一位置包含多个点，那么这多个点中的其中一些点将存储于内部节点，而非叶子结点。四叉树可用于加速各种空间操作，例如计算正多边形的体积的Barnes-Hut近似算法或者冲突检验。
# d3.geom.quadtree()
创建一个新的四叉树工厂使用默认的x访问器，y访问器及范围。返回的函数可以用来从带有工厂的配置的数据创建任意个四叉树。
# quadtree(points)
为指定的点数据数组构造一个新的四叉树，返回新四叉树的根结点。每一个点的X和Y坐标使用当前x及y访问器函数确定。通过增量地添加点来建立四叉树，指定的点数组可以为空，之后点可以随后添加到返回的根节点；在这种情况下，你必须指定四叉树的范围。
四叉树的每一个结点都有多个属性。
nodes——按顺序排列四个子结点的稀疏数组：top-left, top-right, bottom-left, bottom-right。
leaf ——内部结点与叶子结点的布尔表示。
point ——这个点关联的节点，如果有的话（可能适用于内部或叶节点）。
X——关联点的x坐标，如果有的话。
Y——关联点的y坐标，如果有的话。
返回的根结点也可定义了增加方法add 或者访问方法visit 。
# root.add(point)
为四叉树增加指定的新点。
# root.visit(callback)
访问四叉树的每个结点，利用参数 {node, x1,y1, x2, y2} 为每个结点调用指定的回调函数，结点按先序遍历。若调用给定结点的回调函数返回值为真，则表示不能访问此结点的子结点，否则表示所有子结点均能被访问。
# quadtree.x([x])
若设置了x参数，则为四叉树设置横坐标访问器，并返回四叉树。反之，则返回当前默认的横坐标访问器。
function(d) { return d[0]; }
对每一个加入到四叉树中的点，不管是初始化构造的还是后面新增的，都可以通过参数 {d, i}调用x访问器，d表示当前点，i表示所有点数组的索引。X访问器必须返回一个数值，表明给定点的x坐标。如果需要得花，x访问器也可以被定义为一个常数，而非一个函数。
# quadtree.y([y])
若设置了y参数，则为四叉树设置纵坐标访问器，并返回四叉树。反之，则返回当前默认的纵坐标访问器
function(d) { return d[1]; }
对每一个加入到四叉树中的点，不管是初始化构造的还是后面新增的，都可以通过参数 {d, i}调用y访问器，d表示当前点，i表示所有点数组的索引。y访问器必须返回一个数值，表明给定点的y坐标。如果需要得花，y访问器也可以被定义为一个常数，而非一个函数。
# quadtree.extent([extent])
若设置了extent参数，则为四叉树设置范围，然后返回四叉树。反之，则返回当前范围，其默认为空。
当范围为空时，范围将会自动扫描输入点数组自动计算并传到四叉树构造器。否则，范围必须用二维数组[[x0, y0], [x1,y1]]明确定义，x0和y0为范围的下限，x1和y1为范围的上限。当从最初为空的节点慢慢构建一个四叉树，设置范围是非常必要的。
曼妙征程译20141127咕噜校对2014-12-8 20:24:31
泰森多边形
最后更新于：2022-04-01 11:12:21
> [Wiki](Home) ▸ [[API--中文手册]] ▸ [[几何]] ▸ **泰森多边形**
* 如发现翻译不当或有其他问题可以通过以下方式联系译者:
* 邮箱：zhang_tianxu@sina.com
* QQ群：[D3数据可视化](http://jq.qq.com/?_wv=1027&k=ZGcqYF)205076374，[大数据可视化](http://jq.qq.com/?_wv=1027&k=S8wGMe)436442115
Voronoi布局对于无形的交互地区尤其有用，在Nate Vack’s Voronoi picking例子中被证实，看Tovi Grossman’s关于 bubble cursors的论文，以了解相关内容。
Voronoi picking：http://bl.ocks.org/njvack/1405439
# d3.geom.()
创建一个带默认访问器的Voronoi布局。
# voronoi(data)
返回多边形的数组，用于指定的数据数组中的每个输入顶点。如果有任何顶点重合或具有NaN的位置，这个方法的行为是undefined：最有可能的，将返回无效的多边形！你应该在计算曲面细分之前过滤无效的顶点，合并重合的顶点。
# voronoi.x([x])
如果x是指定了的，则设置x坐标访问器。如果x坐标没被指定，返回当前的x坐标访问器。默认为：
function(d){returnd[0];}
# voronoi.y([y])
如果y是指定了的，则设置y坐标访问器。如果y坐标没被指定，返回当前的y坐标访问器。默认为：
function(d){returnd[1];}
# voronoi.clipExtent([extent])
如果范围是指定的，设置Voromoi布局的剪切范围为指定的范围并返回这个布局。范围边界被指定为一个数组[[x0, y0], [x1, y1]]，其中X0是范围的左侧，Y0是顶部， x1为右侧和Y1是底部。如果范围为空，剪切不执行。如果没有指定范围，则返回当前剪切的范围，默认为空。
看这个例子：http://bl.ocks.org/mbostock/4237768，剪切范围的使用被强烈推荐，因为没剪切的多边形可能有很大部分坐标没有被正确显示。
另外，你也可以使用自定义的没有指定大小的剪裁，无论是在SVG或者通过 polygon.clip后续处理。
# voronoi.links(data)
返回指定数据数组的Delaunay三角作为links的数组。每一个link都有下面的属性：
Source-源节点（数据中的一个元素）
• target-目标节点（数据中的一个元素）
案例力导向美国地图：http://bl.ocks.org/mbostock/1073373使用这样的链接数组创建了一个力导向的地图。
# voronoi.triangles(data)
返回指定的数据数组的Delaunay三角作为三角形的阵列。每个三角形是包含data中的元素的一个三元素数组。
* 谁浮T20141125
* guluP2014-12-8 20:55:17
d3.geom (几何)
最后更新于：2022-04-01 11:12:19
> [Wiki](主页) ▸ [[API--中文手册]] ▸ **几何**
* 如发现翻译不当或有其他问题可以通过以下方式联系译者:
* 邮箱：zhang_tianxu@sina.com
* QQ群：[D3数据可视化](http://jq.qq.com/?_wv=1027&k=ZGcqYF)205076374，[大数据可视化](http://jq.qq.com/?_wv=1027&k=S8wGMe)436442115
* [[Voronoi|泰森多边形]] - 由一组点计算Voronoi密铺或Delaunay三角剖分 。
* [[Quadtree|四叉树]] - 由一组点计算四叉树。
* [[Hull|赫尔]] - 由一组点计算凸包。
* [[Polygon|多边形]] - 多边形计算，例如求面积、剪裁等。
流
最后更新于：2022-04-01 11:12:17
> [Wiki](Home) ▸ [[API Reference]] ▸ [[Geo]] ▸ **Geo Streams**
For fast transformations of geometry without temporary copies of geometry objects, D3 uses **geometry streams**. The main [d3.geo.stream](#d3_geo_stream) method converts a GeoJSON input object to a stream: a series of method calls on a *stream listener*. In addition, D3 provides several stream transformations that wrap listeners and transform the geometry. For example, the [projection.stream](Geo-Projections#stream) interface transforms spherical coordinates to Cartesian coordinates, and [d3.geo.path](Geo-Paths) serializes geometry to either SVG or Canvas. Internally, clipping and rotating are also implemented as stream transformations.
<a name="stream" href="#stream">#</a> d3.geo.<b>stream</b>(<i>object</i>, <i>listener</i>)
Streams the specified [GeoJSON](http://geojson.org) *object* to the specified stream *listener*. (Despite the name “stream”, these method calls are currently synchronous.) While both features and geometry objects are supported as input, the stream interface only describes the geometry, and thus additional feature properties are not visible to listeners.
## Stream Listeners
Stream listeners must implement several methods to traverse geometry. Listeners are inherently stateful; the meaning of a [point](#point) depends on whether the point is inside of a [line](#lineStart), and likewise a line is distinguished from a ring by a [polygon](#polygonStart).
<a name="stream_point" href="#stream_point">#</a> listener.<b>point</b>(<i>x</i>, <i>y</i>[, <i>z</i>])
Indicates a point with the specified coordinates *x* and *y* (and optionally *z*). The coordinate system is unspecified and implementation-dependent; for example, [projection streams](Geo-Projections#stream) require spherical coordinates in degrees as input. Outside the context of a polygon or line, a point indicates a point geometry object ([Point](http://www.geojson.org/geojson-spec.html#point) or [MultiPoint](http://www.geojson.org/geojson-spec.html#multipoint)). Within a line or polygon ring, the point indicates a control point.
<a name="stream_lineStart" href="#stream_lineStart">#</a> listener.<b>lineStart</b>()
Indicates the start of a line or ring. Within a polygon, indicates the start of a ring. The first ring of a polygon is the exterior ring, and is typically clockwise. Any subsequent rings indicate holes in the polygon, and are typically counterclockwise.
<a name="stream_lineEnd" href="#stream_lineEnd">#</a> listener.<b>lineEnd</b>()
Indicates the end of a line or ring. Within a polygon, indicates the end of a ring. Unlike GeoJSON, the redundant closing coordinate of a ring is *not* indicated via [point](#point), and instead is implied via lineEnd within a polygon. Thus, the given polygon input:
```json
{
"type": "Polygon",
"coordinates": [
[[0, 0], [1, 0], [1, 1], [0, 1], [0, 0]]
]
}
```
Will produce the following series of method calls on the listener:
```js
listener.polygonStart();
listener.lineStart();
listener.point(0, 0);
listener.point(1, 0);
listener.point(1, 1);
listener.point(0, 1);
listener.lineEnd();
listener.polygonEnd();
```
<a name="stream_polygonStart" href="#stream_polygonStart">#</a> listener.<b>polygonStart</b>()
Indicates the start of a polygon. The first line of a polygon indicates the exterior ring, and any subsequent lines indicate interior holes.
<a name="stream_polygonEnd" href="#stream_polygonEnd">#</a> listener.<b>polygonEnd</b>()
Indicates the end of a polygon.
<a name="stream_sphere" href="#stream_sphere">#</a> listener.<b>sphere</b>()
Indicates the sphere (the globe; the unit sphere centered at ⟨0,0,0⟩).
## Stream Transforms
A stream transform wraps a stream listener, transforming the geometry before passing it along to the wrapped listener. A [geographic projection](Geo-Projections) is one example of a stream transform. The [d3.geo.transform](#transform) class provides an easy way of implementing a custom stream transform.
<a name="transform" href="#transform">#</a> d3.geo.<b>transform</b>(<i>methods</i>)
Creates a new stream transform using the specified hash of methods. The hash may contain implementations of any of the standard stream listener methods: [sphere](#stream_sphere), [point](#stream_point), [lineStart](#stream_lineStart), [lineEnd](#stream_lineEnd), [polygonStart](#stream_polygonStart) and [polygonEnd](#stream_polygonEnd). Any method that is _not_ present in the specified hash will be implemented a pass-through directly to the wrapped stream. To access the wrapped stream within a method, use `this.stream`. For example, to implement a simple [2D matrix transform](http://bl.ocks.org/mbostock/5663666):
```js
function matrix(a, b, c, d, tx, ty) {
return d3.geo.transform({
point: function(x, y) { this.stream.point(a * x + b * y + tx, c * x + d * y + ty); },
});
}
```
This transform can then be used in conjunction with [d3.geo.path](Geo-Paths). For example, to implement a 2D affine transform that flips the <i>y</i>-axis:
```js
var path = d3.geo.path()
.projection(matrix(1, 0, 0, -1, 0, height));
```
<a name="transform_stream" href="#transform_stream">#</a> transform.<b>stream</b>(<i>listener</i>)
Given the specified stream *listener*, returns a wrapped stream listener that applies this transform to any input geometry before streaming it to the wrapped listener.
<a name="clipExtent" href="#clipExtent">#</a> d3.geo.<b>clipExtent</b>()
Create a new stream [transform](#transform) that implements axis-aligned rectangle clipping. This is typically used to clip geometry to the viewport after [projecting](Geo-Projections).
<a name="clipExtent_extent" href="#clipExtent_extent">#</a> clipExtent.<b>extent</b>([<i>extent</i>])
If *extent* is specified, sets the clip extent to the specified rectangle [[<i>x0</i>, <i>y0</i>], [<i>x1</i>, <i>y1</i>]] and returns this transform. If *extent* is not specified, returns the current clip extent, which defaults to [[0, 0], [960, 500]].
地理投影
最后更新于：2022-04-01 11:12:15
> [Wiki](Home) ▸ [[API--中文手册]] ▸ [[地理]] ▸ **地理投影**
* 如发现翻译不当或有其他问题可以通过以下方式联系译者:
* 邮箱：zhang_tianxu@sina.com
* QQ群：[D3数据可视化](http://jq.qq.com/?_wv=1027&k=ZGcqYF)205076374，[大数据可视化](http://jq.qq.com/?_wv=1027&k=S8wGMe)436442115
D3默认包括了一些常见投影，如下所示。众多的（不太常用的）投影在扩展地理投影插件和多面体投影插件中是可用的。
由D3提供的大多数投影都是通过d3.geo.projection来创建并配置的，你可以旋转这个地球，缩放或转换画布等。除非你正在执行一个新的原始投影，否则你可能不会用D3.geo.projection来构造，但是你有可能使用这个配置方法。
# d3.geo.projection(raw)
从指定的原始raw 点投影的函数，构造一个新的投影。例如，一个Mercator投影可实现为：
varmercator=d3.geo.projection(function(λ,φ){
return[
λ,
Math.log(Math.tan(π/4+φ/2))
];
});
（可以参考src/geo/mercator.js全面的实现。）如果原始函数支持反转方法，则返回的投影将会显示一个对应的反转方法。
src/geo/mercator.js：ttps://github.com/mbostock/d3/blob/master/src/geo/mercator.js
# projection(location)
投影从球面坐标（单位：度）转到笛卡尔坐标（单位：像素），返回数组[x, y]，给出输入数组[longitude, latitude]。如果指定的位置没有定义投影的位置，那么返回可能为null。例如，当位置在投影的裁剪边界之外的时候。
# projection.invert(point)
投影反向是从直角坐标（像素），到球面坐标（度），返回一个数组[longitude, latitude]，给定输入数组[x, y]。但并非所有的投影都会实现反转，对于可逆投影，这种方法是undefined。
# projection.rotate([rotation])
如果rotation 旋转指定了，设置投影的三轴旋转为指定的角度λ，φ和γ（偏航角，倾斜角和滚动角，或等效地经度，纬度和滚动），以度并返回投影。如果rotation 未指定，返回当前缺省的转动值[0, 0, 0]。如果rotation 指定且只有两个值，而不是3个值，那么滚动的角度被假设为0°。
# projection.center([location])
如果center 重心指定了，则设置投影中心为指定的位置，经度和纬度度数的两元数组，并返回投影。如果没有指定中心，则返回当前的中心，默认为⟨0°,0°⟩。
# projection.translate([point])
如果point 点指定了，则设置投影转变的位移为指定的二元数组[x, y]并返回的投影。如果未指定点，则返回当前变换的位移，默认为[480, 250]。变换的位移确定投影的中心像素坐标。默认转换位移的位置是⟨0°,0°⟩，在一个960×500区域的中心。
# projection.scale([scale])
如果scale 比例尺指定了，则设置投影的比例尺为特定的值，并返回投影。如果未指定比例尺，返回默认的值150。比例尺因子线性地对应于投影点之间的距离。然而，比例尺因子不能一直越过投影。
# projection.clipAngle(angle)
如果angle 角度指定了，则设置投影的裁剪圆半径，指定角度并返回投影。如果角度为null，切换到子午线切割，而不是小圈的裁剪。如果没有指定角度，返回当前裁剪的角度，默认为空。小圈裁剪是独立于通过clipExtent的视窗裁剪。
antimeridian cutting：http://bl.ocks.org/mbostock/3788999
# projection.clipExtent(extent)
如果extent 范围指定了，则设置投影的剪辑视窗范围为指定的边界，以像素为单位并返回投影。extent 范围边界被指定为一个数组[[x0, y0], [x1,y1]]，其中x0 是视窗的左侧，y0 是顶部，x1 为右侧和y1 是底部。如果范围为null，则视窗裁剪不执行。如果extent 范围没有指定，则返回当前视窗裁剪的范围，默认为null。视窗裁剪是独立于通过clipAngle的小圈剪裁。
# projection.precision(precision)
如果precision 精度指定了，则设置投影自适应重采样的临界值为指定的值，以像素为单位，并返回投影。此值对应于Douglas–Peucker 距离。如果precision 精度没有指定，则返回投影当前重采样的精度，其精度默认为Math.SQRT(1/2)。
0的精密度禁止自适应重采样。
# projection.stream(listener)
返回一个投影流，包装了特定的监听器。任何几何形状的流对封装器，都是在被传输到包监听之前投影的。一个典型的投影包含多个流的变换：输入的几何形首先被转换为弧度，在三轴上旋转，在小圆圈或沿着子午线切割，最后投射到具有自适应重采样，缩放和平移的笛卡尔平面上。
# d3.geo.projectionMutator(rawFactory)
构造一个新的投影，是从指定的原始点投影函数factory开始。此函数不直接返回投影，而是返回一个变换的方法，且你可以随时调用原始投影函数发生变换的方法。例如，假设你正在实施Albers equal-area conic投影，它需要配置投影的两大相似之处。使用闭包，可以实现原始投影，如下所示：
// φ0 and φ1 are the two parallels
functionalbersRaw(φ0,φ1){
returnfunction(λ,φ){
return[
/* compute x here */,
/* compute y here */
];
};
}
使用d3.geo.projectionMutator，可以实现一个标准的投影，使相似之处有所改变，重新分配由d3.geo.projection内部使用的原始投影：
functionalbers(){
varφ0=29.5,
φ1=45.5,
mutate=d3.geo.projectionMutator(albersRaw),
projection=mutate(φ0,φ1);
projection.parallels=function(_){
if(!arguments.length)return[φ0,φ1];
returnmutate(φ0=+_[0],φ1=+_[1]);
};
returnprojection;
}
因此，在创建一个可变的投影时，变化的函数永远不会暴露出来，但可以很容易地重新创建底层的原始投影。对于完全实现，可以参考src/geo/albers.js。
Standard Projections
# d3.geo.albers()
d3.geo.albers是d3.geo.conicEqualArea的一个别名，默认为美国中心：scale 1000，translate [480, 250]，rotation [96°, 0°]，center ⟨-0.6°, 38.7°⟩ 和parallels [29.5°, 45.5°]，使其能够适合的显示美国，中心围绕着Hutchinson，Kansas在一个960×500的区域。中央经线和纬线是由美国地质调查局在1970年国家地图集规定的。
# d3.geo.albersUsa()
埃尔伯USA投影是一个复合投影，这复合的四个埃尔伯投影的设计是用来显示美国下部48，在阿拉斯加和夏威夷旁边。虽然用于等值线图，它扩展阿拉斯加0.35x倍的区域（估计是3倍），夏威夷作为下部48显示在相同比例尺的。
埃尔伯USA投影不支持旋转或者居中。
# d3.geo.azimuthalEqualArea()
方位角等面积投影也适用于等值线图。这个投影的极性方面用于联合国标志。
polar aspect：ttp://bl.ocks.org/mbostock/4364903
# d3.geo.azimuthalEquidistant()
方位角的等距投影保留了从投影中心的距离，从任何投影点到投影中心的距离到大弧距离是成比例的。因此，围绕投影中心的圆圈是投影在笛卡尔平面的圆圈。这可以用于相对一个参考点的可视化距离，如可交换距离。
# d3.geo.conicConformal()
兰伯特的等角的二次曲线投影投影地球形状成为一个锥形。
# conicConformal.parallels([parallels])
如果parallels 指定了，则设定投影的标准平行线为特定的二元纬度数组，并返回这个投影。如果parallels 没有指定，返回当前的parallels 。
# d3.geo.conicEqualArea()
埃尔伯投影，作为一个区域相等的投影，被推荐用于等值线图，因为它保留了地理特征的相对区域。
# conicEqualArea.parallels([parallels])
如果parallels 指定了，设置埃尔伯投影的标准平行线为指定的二元纬度数组（以度为单位），并返回投影。如果parallels 没有指定，返回当前parallels 。为了最大限度地减少失真，平行线应选择为围绕投影的中心。
# d3.geo.conicEquidistant()
# conicEquidistant.parallels([parallels])
如果parallels 指定了，设定投影的标准parallels 到指定的二元纬度数组（度），并返回投影。如果parallels 没有指定，返回当前的parallels 。
# d3.geo.equirectangular()
这个正方形投影，或plate carrée投影，是最简单可行的地理投影：标识函数。它既不等面积也不等角，但有时用于光栅数据。见光栅重投影的一个例子，源图像使用正方形投影。
raster reprojection：ttp://bl.ocks.org/mbostock/4329423
# d3.geo.gnomonic()
球心投影是一个方位角投影，它投射大圆为直线。参考interactive gnomonic 的例子。
interactive gnomonic：ttp://bl.ocks.org/mbostock/3795048
# d3.geo.mercator()
这个球面的Mercator投影是常用的分片式映射库（例如OpenLayers 和Leaflet）。例如显示栅格分片与Mercator投影，可以参见d3.geo.tile插件，它是正形投影的，然而，它的推行造成了世界范围地区严重失真，因此不建议使用choropleths。
# d3.geo.orthographic()
正投影是适合于显示单个半球的方位投影，透视的点在无穷远处。可以看世界观光的动画和互动正投影的例子。对于一般的透视投影，可以参考卫星投影。
# d3.geo.stereographic()
立体投影是另一个角度（方位）投影。在表面上看，透视的点是球体。因此，这是常用的天体图。参考交互式立体为例。
# d3.geo.transverseMercator()
横向的墨卡托投影。
Raw Projections
D3提供了几个原始的投影，当一个复合投影实现时，设计重用（如Sinu–Mollweide，它结合了原始的正弦曲线和摩尔维特投影）。原始投影在使用之前，通常是用d3.geo.projection封装着。这些点函数都是采用球面坐标λ和φ（弧度）作为输入，并返回一个二元数组（也是用弧度）作为输出。许多原始投影从平面坐标映射到球面坐标，实现了一个反转的投影。
# d3.geo.albers.raw(φ0, φ1)
是d3.geo.conicEqualArea.raw的一个别名。
# d3.geo.azimuthalEqualArea.raw
原始方位角的等面积投影。
# d3.geo.azimuthalEquidistant.raw
原始的等距方位投影。
# d3.geo.conicConformal.raw(φ0, φ1)
返回一个原始的等角的二次曲线投影，并用弧度指定parallels。
# d3.geo.conicEqualArea.raw(φ0, φ1)
返回一个原始的埃尔伯投影，并用弧度指定parallels。
# d3.geo.conicEquidistant.raw(φ0, φ1)
返回一个原始等距圆锥投影，并用弧度指定parallels。
# d3.geo.equirectangular.raw
原始的正方形投影。
# d3.geo.gnomonic.raw
原始的球心投影。
# d3.geo.mercator.raw
原始的墨卡托投影。
# d3.geo.orthographic.raw
原始的正投影。
# d3.geo.stereographic.raw
原始的立体投影。
* 何凯琳译20141129
* gulu校对2014-12-7 23:27:06
地理路径
最后更新于：2022-04-01 11:12:12
> [Wiki](Home) ▸ [[API--中文手册]] ▸ [[地理]] ▸ **地理路径**
* 如发现翻译不当或有其他问题可以通过以下方式联系译者:
* 邮箱：zhang_tianxu@sina.com
* QQ群：[D3数据可视化](http://jq.qq.com/?_wv=1027&k=ZGcqYF)205076374，[大数据可视化](http://jq.qq.com/?_wv=1027&k=S8wGMe)436442115
对于地图的可视化，D3支持少数的组件显示和操作地理数据。这些组件使用GeoJSON格式——在JavaScript中标准的地理特征表示方法。（可以参见TopoJSON格式，它是GeoJSON的扩展格式，表示的更加紧密。）。要把图形文件转换为GeoJSON，使用ogr2ogr的GDAL包的一部分。
这有一些你可能感兴趣的其他工具：
TopoJSON –简化图形文件，拓扑结构和GeoJSON压缩。
Shapely –操作平面几何图形对象。
ColorBrewer –地图颜色的比例尺。
PostGIS –一个地理空间数据库。
显示地理数据最主要的机制就是用到d3.geo.path。这个类是类似于d3.svg.line和其他SVG形状生成程序：给定一个几何形状或功能的对象，它生成适合于SVG路径元素的“d”属性的路径数据串。该d3.geo.path类可以直接渲染到画布上，在动画投影时可以提供更好的性能。
# d3.geo.path()
创建一个新的地理路径生成器，使用默认设置：albersUsa投影和4.5个像素点的半径。
# path(feature[, index])
为给定的功能feature返回路径数据串，它可以是任何GeoJSON的特征或几何对象：
Point –单个位置。
MultiPoint –一组位置。
LineString –一组位置形成一条连续的线。
MultiLineString - 位置数组的数组，形成多条线。
Polygon –位置数组的数组，形成一个多边形（可能是由小洞组成的）。
MultiPolygon –位置的多维数组，形成了多个多边形。
GeometryCollection –几何对象的数组。
Feature - 包含了几何对象其中的一个特征。
FeatureCollection –特征对象的数组。
“Sphere”类型也支持，对于绘制地球的轮廓是非常有用的。sphere球体没有坐标。一个可选的index 索引可以被指定，传递给pointRadius存取器，Index在路径生成器被selection.attr调用的时候自动地传递。
重要的是：一多边形内部是所有的点，这些点是以顺时针方向围绕着多边形。如果你的GeoJSON输入有错误顺序的多边形，那么你必须扭转它们，通过ST_ForceRHR，你也可以将你的GeoJSON转换为TopoJSON，这样的话，它就能自动生成。
显示多个功能，你可以将它们放置在一个单一的特征集和单一路径元素上：
svg.append("path")
.datum({type:"FeatureCollection",features:features})
.attr("d",d3.geo.path());
另外，您也可以创建多个不同的路径元素：
svg.selectAll("path")
.data(features)
.enter().append("path")
.attr("d",d3.geo.path());
对于集合来说利用不同的路径元素通常地比单个路径元素要慢。但是，如果你想与特征分别进行交互的话，不同的路径元素是最好的（例如，使用CSS：悬停或单击事件）。
# path.projection([projection])
如果 指定了投影projection，设置为路径生成器使用的投影为指定的投影函数。如果projection 投影没有指定，那么返回当前的投影，默认为albersUsa。projection 投影通常是D3一个内置地理投影；然而，任何函数都可以使用。投影函数采用了两元素的数字数组来代表坐标的位置，[longitude, latitude]，并返回类似的表示该投影像素位置[x, y]的两元素数字数组。例如，一个基本的spherical Mercator投影：
functionmercator(coordinates){
return[
coordinates[0]/360,
(-180/Math.PI*Math.log(Math.tan(Math.PI/4+coordinates[1]*Math.PI/360)))/360
];
}
从内在的说，这个点投影函数是包裹着一个备用的流变换，它可以执行自适应重采样。然而，备用的流不执行任何裁剪或切割。
为了更好地控制流的变换，projection 投影可以被指定为一个对象来实现流方法（参见实例：http://bl.ocks.org/mbostock/5663666）。该流的方法需要一个输出流作为输入，并返回一个投影在输入的几何体上的包装流，换句话说，它实现了projection.stream。
如果投影为null，则路径使用恒等变换，其中输入的几何体不被投影并且不是直接以原始坐标来渲染。这对已经投影的几何体快速渲染有用，或对正方形投影的快速渲染有用。
# path.context([context])
如果指定了context ，设置渲染上下文并返回生成的路径。如果context 为空，当在一个给定的功能调用时，路径生成器将返回一个SVG路径字符串。如果context 非空，路径生成器将替换调用函数为指定的上下文来渲染几何图形。context 必须实现以下方法：
beginPath()
moveTo(x, y)
lineTo(x, y)
arc(x, y, radius, startAngle, endAngle)
closePath()
可以注意到，这是画布元素的二维渲染上下文的子集，这样画布context 可以被传递到路径生成器，在这种情况下，几何形状将直接渲染到画布上。如果context 没有指定，则返回当前渲染的上下文，默认为null。
# path.area(feature)
对指定的功能feature计算投影面积（使用方形像素）。Point，MultiPoint，LineString和LineString特征有为零的区域。对多边形Polygon和多边形集合MultiPolygon的特征，该方法首先计算外部环形的面积，再减去内部有任何孔的区域。这种方法通过投影流观察进行任何的剪裁和重新采样。
# path.centroid(feature)
对指定的功能feature计算投影重心（以像素为单位），这是非常方便的。比如说，标记州或国家的边界，或显示符号映射。非连续统计图，示例了围绕其质心的每个状态。这种方法观察通过投影流运行的任何剪裁和重新采样。
非连续统计图：ttp://mbostock.github.com/d3/ex/cartogram.html
# path.bounds(feature)
对特定的功能计算投影的边框（像素），这是非常方便的。比如说，放大到一个特定的形态。这种方法观察通过投影流运行的任何剪裁和重新采样。
# path.pointRadius([radius])
如果指定半径，那么设置的半径为特定的数，用来显示点Point和多点MultiPoint的功能。如果未指定半径，则返回当前的半径。而半径通常指定为一个数字常数，它也可以被指定为对每个特征进行计算的函数，传递来自路径函数的feature 和index 参数。例如，如果你的GeoJSON数据有额外的属性，你就可以访问内置的半径函数中的属性来改变点的大小；或者，你可以用d3.svg.symbol 和一个投影来更好地控制显示。
Shape Generators
注：在D3中生成一个巨大的弧线，只需要简单地把一个LineString类型的几何对象传递给d3.geo.path。D3的投影采用great-arc插值器生成中间点（使用了自适应重采样）。因此没有必要使用形状生成器来创造大的弧线。
# d3.geo.graticule
构造一个特征生成器用来创建地理刻度。
# graticule()
返回一个MultiLineString几何对象表示这个刻度的所有经线和纬线。
# graticule.lines()
返回LineString几何对象，用于这个刻度的每一个经线和纬线。
# graticule.outline()
返回一个多边形Polygon几何对象，代表了这个地理坐标的轮廓，IE浏览器沿着它的经线和纬线界定其范围。
# graticule.extent(extent)
如果extent 指定了，设置此刻度的主要和次要范围。如果没有指定范围，返回当前次要的范围，默认为⟨⟨-180°, -80° - ε⟩, ⟨180°, 80° + ε⟩⟩。
# graticule.majorExtent(extent)
如果extent 指定了，设置此刻度的主要范围。如果未指定范围，返回当前主要的范围，默认为⟨⟨-180°, -90° + ε⟩, ⟨180°, 90° - ε⟩⟩。
# graticule.minorExtent(extent)
如果extent 指定了，设置此刻度的较小范围。如果没有指定范围，返回当前较小的范围，默认为⟨⟨-180°, -80° - ε⟩, ⟨180°, 80° + ε⟩⟩。
# graticule.step(step)
如果step 指定了，设置这个刻度的主要和次要的步长。如果没有指定step ，则返回当前次要的step ，默认为⟨10°, 10°⟩。
# graticule.majorStep(step)
如果step 指定了，设置这个刻度的主要step。如果没有指定step，返回当前的主要step，它默认为⟨90°, 360°⟩。
# graticule.minorStep(step)
如果step 指定了，设置这个刻度次要的step 。如果没有指定step ，返回当前的次要step ，默认为⟨10°, 10°⟩。
# graticule.precision(precision)
如果指定了precision ，设置这个刻度的精度，以度为单位。如果没有指定精度，则返回当前精度，默认值为2.5°。
# d3.geo.circle
为在一个给定的地理位置创建带有给定半径（以度为单位）的圆中心构建一个特征生成器。
# circle(arguments…)
返回一个接近圆形的GeoJSON多边形。原点访问器指定如何为给定的参数确定原点，默认的访问使用的是常量⟨0°,0°⟩。
# circle.origin([origin])
如果指定了origin ，设置圆的原点。一个两元坐标数组应该被指定，或访问函数。如果origin 没有指定，则返回当前的原点，默认值为⟨0°,0°⟩。
# circle.angle([angle])
如果指定了angle ，用度数来设置圆的角半径。如果angle 没有指定，则返回当前的半径，默认为90°。
# circle.precision([precision])
如果precision 指定，以度为单位设置圆形片段的精度的插值器。当一个特征被圆形裁剪时，这些内插节段就被插入了。如果没有指定precisionis，则返回当前精度，默认值为6°。
Spherical Math
# d3.geo.area(feature)
返回指定功能的球形区域（以球面度为单位）。可以参考path.area，其在Cartesian plane平面上计算投影区域。
# d3.geo.centroid(feature)
返回指定功能的球形重心。可参考path.centroid，其在Cartesian plane平面上计算投影重心。
# d3.geo.bounds(feature)
返回指定功能的球形边框。边界框是由一个二维数组来表示：[[left, bottom], [right, top]]，其中left 是最小经度，bottom 是最小纬度，right 是最大经度和top 是最大纬度。可参考path.bounds，其在Cartesian plane平面上计算投影的边界框。
# d3.geo.distance(a, b)
返回在两个点a和b之间弧度的最大距离，每个点都被指定为一个数组[longitude, latitude]，和表示十进制度的坐标。
# d3.geo.length(feature)
返回弧度指定功能的大弧great-arc的长度。对于多边形，返回外环周长加上任何内置的环。
# d3.geo.interpolate(a, b)
返回给定的两个位置a和b的插值器。每个位置必须被表示为一个[longitude, latitude]的二元数组。返回的插值器是一个函数，它可以接受单个参数t作为输入，其中t的范围是0〜10，0返回a位置的，而1返回b的位置。中间值的插入是从a到b的大弧形。
# d3.geo.rotation(rotate)
设置一个旋转为 [λ, φ, γ]形式的数组。数组的元素是以度为单位的角度，并指定按照下面的顺序来旋转：纵向，横向和原点。如果数组的最后一个元素，γ，省略了，那么这个默认值就为0。返回一个函数，该函数就如所述的那样转动到一个指定的位置。
# rotation(location)
在上述描绘的顺序下，这个旋转是在一个指定的位置，根据特定的角度来旋转的。位置被指定为一个数组[longitude, latitude]，用度数表示的坐标。返回一个新的数组来表示旋转的位置。
# rotation.invert(location)
该旋转是根据指定的角度和位置来旋转的，但与上述描述的相反顺序来旋转。一个位置指定为一个数组[longitude, latitude]，用度数来表示坐标。返回一个新的数组来表示旋转的位置。
* 翟琰琦译 20141124
* 何凯琳 译2014年11月27日 20:45:29
* Gulu 校对 2014-12-7 21:45:37
d3.geo (地理)
最后更新于：2022-04-01 11:12:10
> [Wiki](Home) ▸ [[API--中文手册]] ▸ [[地理]]
* 如发现翻译不当或有其他问题可以通过以下方式联系译者:
* 邮箱：zhang_tianxu@sina.com
* QQ群：[D3数据可视化](http://jq.qq.com/?_wv=1027&k=ZGcqYF)205076374，[大数据可视化](http://jq.qq.com/?_wv=1027&k=S8wGMe)436442115
参见：
* [[Paths|地理路径]] - 展示地理形状。
* [[Projections|地理投影]] - 转换地理坐标为像素坐标。
* [Streams](地理流) - 流几何转换。
矩形树布局
最后更新于：2022-04-01 11:12:08
> [Wiki](Home) ▸ [[API--中文手册]] ▸ [[布局]] ▸ **矩形树布局**
* 如发现翻译不当或有其他问题可以通过以下方式联系译者:
* 邮箱：zhang_tianxu@sina.com
* QQ群：[D3数据可视化](http://jq.qq.com/?_wv=1027&k=ZGcqYF)205076374，[大数据可视化](http://jq.qq.com/?_wv=1027&k=S8wGMe)436442115
矩形树图最先由[Ben Shneiderman](http://www.cs.umd.edu/hcil/treemap-history/)在1991年提出; 矩形树图会递归的对一块矩形区域进行切分, 以达到层级展示的效果. 正如[分区布局](分区布局)中, 每个节点的大小都是显而易见的. 正方化的矩形树图使用近正方的矩形, 因此, 相比于传统的切块或切片图, 具有更好的可读性和节点大小易读性. 还有其他一些关于矩形树图的算法, 比如: [Voronoi](http://portal.acm.org/citation.cfm?id=1056018.1056041) 和 [jigsaw](http://hint.fm/papers/158-wattenberg-final3.pdf), 但是并不常用.
[](http://bl.ocks.org/mbostock/4063582)
和其他 **D3** 类一样, 布局也支持链式调用.
*链式调用, 即: 一个setter方法会返回当前实例, 意味着意味着一个setter方法调用后可以紧接着另一个setter方法的调用, 如: selection.attr('x', 1).style('color', '#999')*
<a name="treemap" href="#treemap">#</a> d3.layout.<b>treemap</b>()
使用默认的配置实例化一个新的矩形树布局: 默认的递减排序, 默认的值存取器会假定输入的数据是一个有value属性的对象, 默认的子节点存取器会假定输入的数据是一个以对象为元素的数组, 默认的绘图区域大小是[1, 1].
# treemap(root)
# treemap.nodes(root)
运行树形图布局，返回与指定根节点相关的节点数组。树状图布局是D3族分层布局的一部分。这些布局遵循相同的基本结构：布局的输入参数是层次结构的根节点，输出的返回值是代表所有节点计算的位置的数组。每个节点还有一些属性：
• parent -父节点，或根是null。
• children -子节点的数组，或叶节点是null。
• value -该节点的值，通过值访问器返回。
• depth -节点的深度，根开始为0。
• x -节点位置的最小横坐标。
• y -节点位置的最小纵坐标。
• dx -节点位置的x轴宽。
• dy -节点位置的y轴宽。
请注意，这会改变传递的节点！
虽然布局有x 和 y尺寸，这表示一个任意的坐标系统；例如，你可以以x为半径y为角度产生辐射状而不是直角的布局。在直角方向，x，y，dx和dy对应于“x”，“y”，“宽度”和“高度”的SVG矩形元素的属性。
# treemap.links(nodes)
给定指定的节点数组，如返回的节点，返回一个对象数组代表从父到子节点的链接。叶节点将不会有任何链接。每一个关系都有两个属性的对象：
• source -父节点（如上所述）。
• target -子节点。
这种方法是有用的，用于检索一组适合于显示的链接描述，经常与对角线形状发生器一起使用。例如：
svg.selectAll("path")
.data(partition.links(nodes))
.enter().append("path")
.attr("d", d3.svg.diagonal());
# treemap.children([children])
如果指定了子节点，设置指定子节点访问器函数。如果未指定子节点，返回当前子节点访问器函数，默认情况下假定输入数据是一个对象，一个子节点数组：
function children(d) {
return d.children;
}
通常，使用d3.json很方便加载节点的层次结构，并用嵌套JSON对象代表输入层次结构。例如：
{
"name": "flare",
"children": [
{
"name": "analytics",
"children": [
{
"name": "cluster",
"children": [
{"name": "AgglomerativeCluster", "size": 3938},
{"name": "CommunityStructure", "size": 3812},
{"name": "MergeEdge", "size": 743}
]
},
{
"name": "graph",
"children": [
{"name": "BetweennessCentrality", "size": 3534},
{"name": "LinkDistance", "size": 5731}
]
}
]
}
]
}
子节点的访问首先在层次结构的根节点调用。如果访问器返回null，则该节点在布局遍历终止被认为是叶节点。否则，访问应返回表示子节点的数据元素的数组。
# treemap.sort([comparator])
如果比较器是指定的，使用指定比较函数设置布局的兄弟节点的排序顺序。如果没有指定比较器，返回当前组的排序顺序，默认为通过相关的输入数据的数值属性降序排列：
function comparator(a, b) {
return b.value - a.value;
}
比较器函数节点对被调用，传递每个节点的输入数据。空比较器禁用排序并使用树的遍历顺序。比较器的功能也可以用d3.ascending或d3.descending实施。
# treemap.value([value])
如果指定了值value ，将值访问器为指定的函数。如果值是未指定的，则返回当前值的访问器，假定输入数据是一个带有数值属性的对象：
function value(d) {
return d.value;
}
值访问器调用被每个输入数据元素，并且必须返回一个表示该节点的数值。这个值用于按比例设定每个节点面积的值。
# treemap.size([size])
如果尺寸size 是指定的，设置现有布局尺寸，指定代表x和y的数值的两元素数组。如果尺寸不是指定的，则返回当前大小，默认为1×1。
# treemap.padding([padding])
为每个树形图单元获取或设置填充，以像素为单位。填充确定保留父节点和子节点之间的额外空间量；这个空间可以用于通过外边缘表示层次结构，或保留父标签的空间。如果不使用填充，那么树中叶子的内容会完全填满布局的大小。
如果指定了填充，则设置新的填充并返回树形布局；如果没有指定填充，则返回当前的填充。填充可以指定几种方法：
• 空值禁用填充；空等同于零。
• 一个数字表示均匀填充，以像素为单位，在所有四面。
• 数组的数值表示上，右，下和左填充值。
填充也可以被指定为一个函数，它返回上面的三个值中的一个。这个函数为每个内部（非叶）节点求值，并且可以被用来动态地计算填充。
# treemap.round([round])
如果四舍五入round 是指定的，设置树状图布局是否将全面取整到像素边界。这可以很好地避免SVG边缘有锯齿。如果四舍五入不是指定的，返回是否将树状图四舍五入。
# treemap.sticky([sticky])
如果粘滞sticky 是指定的，设置树形布局是否是“粘滞”：
粘滞树形布局将保留整个过渡中节点的相对排列。节点分成正方化水平和垂直行，通过每行中最后一个元素存储一个z属性持续整个更新；这允许节点平滑地调整大小，没有将阻碍感知变化值的洗牌或闭塞。但请注意，这会为两种状态之一生成一个次优的布局。如果没有指定粘滞，则返回的树形布局是否已被指定粘滞。
实现注意事项：粘滞树形图的内部缓存节点数组；因此，相同的布局实例不可能再使用于多个数据集。当切换带有粘滞布局的数据集时重置缓存状态，再次调用sticky(true)。自从版本1.25.0，层次布局不再在每次调用中默认复制输入数据，因此它可能是能够消除高速缓存和使布局完全无状态。
# treemap.mode([mode])
如果模式mode 是指定的，设置布局的算法。如果模式没有指定，返回当前的布局算法，默认为“squarify”。支持以下模式：
• squarify - rectangular subdivision; squareness controlled via the target ratio.
• slice - horizontal subdivision.
• dice - vertical subdivision.
• slice-dice - alternating between horizontal and vertical subdivision.
• squarify -矩形细分；矩形通过目标比率控制。
• slice –水平细分。
• dice -垂直细分。
• slice-dice -水平和垂直细分之间的交替。
* ?译gulu
* 校对2014-12-7 08:43:59
树布局
最后更新于：2022-04-01 11:12:06
> [Wiki](Home) ▸ [[API--中文手册]] ▸ [[布局]] ▸ **树布局**
* guluT20141102
* 如发现翻译不当或有其他问题可以通过以下方式联系译者:
* 邮箱：zhang_tianxu@sina.com
* QQ群：[D3数据可视化](http://jq.qq.com/?_wv=1027&k=ZGcqYF)205076374，[大数据可视化](http://jq.qq.com/?_wv=1027&k=S8wGMe)436442115
树布局能够用莱因戈尔德-蒂尔福德算法产生一个整洁的树状结点-链接图。例如，树布局可以用来组织软件的包中类的层级结构。
像其他大多数布局一样，d3.layout.tree返回的是一个对象也是一个函数。也就是说：你可以像调用其他函数一样调用布局，并且这个布局函数有可以改变它的行为的附加方法。像D3里的其他类一样，布局遵循函数的链式模式，其中setter返回布局本身，允许在简单的语句中调用多个setter方法。
# d3.layout.tree()
用默认设置创建一个树布局：默认的排序是null；默认的孩子访问器假定每个输入数据是一个带有孩子数组的对象；默认的操作函数为兄弟节点指定一个结点的宽度，没有兄弟姐妹的节点指定两个结点的宽度；默认的尺寸是1X1。
# tree(root)
# tree.nodes(root)
运行树布局，返回一个与特殊的根结点root 有关系的结点数组。树布局是D3的层次布局家族中的一部分。这些布局遵循相似的基本结构：布局的输入参数是层次结构的根节点，输出返回值是一个经过计算的全部结点的位置的数组。
在每个结点中包含下面几个属性:
•双亲-双亲结点，根节点无双亲。
•孩子-孩子结点的数组，叶子无孩子结点。
•深度-结点的深度，根节点深度为0。
•x-计算结点位置的x坐标。
•y-计算结点位置的y坐标。
尽管布局在x和y方向上有大小，这表示了一个任意的坐标系统；例如，你可以将x看做半径，将y看做角度去产生一个径向而不是笛卡尔布局。
# tree.links(nodes)
给定一个特殊的结点数组nodes，比如通过nodes返回的，返回一个表示从双亲结点到每个孩子结点的对象数组。叶子结点将不再有任何链接，每个链接是一个有两个属性的对象:
•源结点-双亲结点(如上文描述)
•目标结点-孩子结点
这种方法是有用的，用于检索一组适合于显示的链接描述，经常与对角线形状发生器一起使用。例如：
svg.selectAll("path")
.data(tree.links(nodes))
.enter().append("path")
.attr("d", d3.svg.diagonal());
# tree.children([children])
如果指定了子节点children ，设置指定的子节点访问器函数。如果未指定子节点，返回当前子节点访问器函数，默认情况下假定输入数据是一个带有子节点数组的对象：
function children(d) {
return d.children;
}
通常，使用d3.json很方便加载节点的层次结构，并用嵌套JSON对象代表输入层次结构。例如：
{
"name": "flare",
"children": [
{
"name": "analytics",
"children": [
{
"name": "cluster",
"children": [
{"name": "AgglomerativeCluster", "size": 3938},
{"name": "CommunityStructure", "size": 3812},
{"name": "MergeEdge", "size": 743}
]
},
{
"name": "graph",
"children": [
{"name": "BetweennessCentrality", "size": 3534},
{"name": "LinkDistance", "size": 5731}
]
}
]
}
]
}
子节点的访问器首先在层次结构的根节点调用。如果访问器返回null，则该节点在布局遍历终止被认为是叶节点。否则，访问器应返回表示子节点数据元素的数组。
# tree.separation([separation])
如果指定分割separation ，使用指定的函数计算两个相邻节点之间的分割。如果，没有指定分割，返回当前的分割函数，默认为：
function separation(a, b) {
return a.parent == b.parent ? 1 : 2;
}
变量更适合径向布局按比例减少半径之间的分割间隙：
function separation(a, b) {
return (a.parent == b.parent ? 1 : 2) / a.depth;
}
分割函数传入两个相邻节点a和b，必须返回节点之间期望的分割。如果布局决定放置这些相邻节点，节点通常是兄弟节点，即使节点可能是表兄弟（甚至更遥远的关系）。
# tree.size([size])
如果指定尺寸size ，设置可用的布局尺寸为给指定的代表x和y两个元素的数组。如果没有指定的，返回当前的尺寸，默认是1x1。布局尺寸可能指定为x和y，但是并不限定屏幕坐标系和其他任意的坐标系统。例如，产生一个径向布局，其中breadth (x)以度为单位，depth (y)以像素为单位的半径r，例如[360,r]。
树的尺寸是tree.nodeSize特有的属性；设定tree.size设置tree.nodeSize为null。
# tree.nodeSize([nodeSize])
如果指定了nodeSize，则为每个节点设置一个固定大小为代表x和y的两元素数组。如果没有指定的，则返回当前结点的尺寸，其中缺省为null表示该布局是使用整体tree.size属性，而不是使用固定的节点大小。布局尺寸用x和y指定，但是并不受限于屏幕坐标系和其他坐标系统。
nodeSize的属性是tree.size特有的；设定tree.size设置tree.nodeSize为null。
# tree.sort([comparator])
如果指定比较器comparator，用指定的比较器来为布局的同级节点设置排序。如果比较器没有被指定，则返回当前组的排序，默认为空即不排序。比较函数被节点对直接调用，传入输入数据的每一个结点。默认的比较器是空，没有排序和者用树的遍历命令。例如，通过传递数据的数值来进行降序排列:
function comparator(a, b) {
return b.value - a.value;
}
通过结点名或者关键字进行排序也是很普遍的。这可以用d3.ascending和d3.descending可以很容易实现。
# tree.value([value])
如果值是指定的，则使用指定的函数来设置值访问器。如果值没有指定，则返回默认为空的当前值访问器，意思是这个值的属性不能被计算。如果指定，值访问器被每一个输入的数据元素调用，一定能返回一个表示结点值的数字。这个值对于布局来说是没有意义的，但是是层次布局提供的通用函数。
* 阿呆不呆20141128
* gulu校对2014-12-7 10:20:53
堆叠布局
最后更新于：2022-04-01 11:12:03
> [Wiki](Home) ▸ [[API--中文手册]] ▸ [[布局]] ▸ **堆叠布局**
* 如发现翻译不当或有其他问题可以通过以下方式联系译者:
* 邮箱：zhang_tianxu@sina.com
* QQ群：[D3数据可视化](http://jq.qq.com/?_wv=1027&k=ZGcqYF)205076374，[大数据可视化](http://jq.qq.com/?_wv=1027&k=S8wGMe)436442115
堆叠布局需要一个二维的数据数组，并计算基准线；这个基准线会被传到上层，以便生成一个堆叠图。支持多个基线算法，以及启发式的排序算来可以提高感知灵敏度，就像拜伦(Byron)和瓦腾伯格(Wattenberg)在“Stacked Graphs—Geometry & Aesthetics”（http://www.leebyron.com/else/streamgraph/download.php?file=stackedgraphs_byron_wattenberg.pdf）中所说的那样。
堆叠布局可以工作在任意的二维x，y坐标系空间，就像是D3的其他布局一样，包括树布局(tree)。因此，图层可以被垂直、水平叠放，或者是其他径向的叠放(radially)。尽管图表的默认偏移是零，但是依然可以使用扭动或摆动(wiggle)的偏移量来绘制流图，它会尽量的减少在偏移时所产生的锯齿边界。
# d3.layout.stack()
构造一个新的堆叠布局，使用默认的偏移（零）和排序（空null）；返回的布局对象是一个对象也是一个函数；也就是说：你可以向调用函数一样调用布局，布局是具备改变其行为的方法的；和D3中其他类相似，布局遵循方法链模式，其中setter方法返回布局本身，并允许在一个简单语句中调用多个setter方法。
# stack(layers[, index])
为各层计算y坐标的基线，并传到相应的层中。最简单的情况，层是一个二维的值数组；所有的第二维的数组必须是相同的长度。y和x访问器被用来分别定义每层的x坐标位置的y方向厚度；因此下面这些值都是必须的：
• x - x位置处所对应的值，即x坐标；
• y - y处厚度所对应的值；
• y0 - y方向最小的y值，即基线；
以上这些属性可以通过重写访问器或out函数进行自定义。
# stack.values([accessor])
指定在每一层中如何从相关联的元素中提取值，访问器是一个函数，并被传递给层以被调用在每一个输入层上，相当于是在计算堆叠布局前调用了layers.map(accessor)。默认的值函数是内置对象，类似于标识函数。如果未指定访问器accessor，则返回当前的值访问器。
值访问器可以被用于关联每层额外的数据，而不仅仅是每一个点；例如，假设你的数据结构如下：
var layers = [
{
"name": "apples",
"values": [
{ "x": 0, "y": 91},
{ "x": 1, "y": 290}
]
},
{
"name": "oranges",
"values": [
{ "x": 0, "y": 9},
{ "x": 1, "y": 49}
]
}
];
指定一个值访问器来检索每层的点：
var stack = d3.layout.stack()
.offset("wiggle")
.values(function(d) { return d.values; });
然后，如果你想给每层添加一个tooltip，你可以这样写：
svg.selectAll("path")
.data(stack(layers))
.enter().append("path")
.attr("d", function(d) { return area(d.values); })
.append("title")
.text(function(d) { return d.name; });
# stack.offset([offset])
如果指定offset，则设置堆叠的偏移算法为指定的offset ；如果未指定offset ，则返回当前的offset；以下的字符串值可以被使用：
• silhouette - 居中流，类似于 ThemeRiver；
• wiggle - 尽量减少斜率变化比例；
• expand -标准化层以填补在范围[0,1]之间；
• zero - 使用零基线，即y轴.；
另外offset 可以是一个函数；输入到该函数的是层数据；并已被标准化显示：一个二维的值数组，每个元素被表示为一个二元素的数组[x,y]；函数的返回值必须是一个表示基线y坐标的数组。例如，默认的零偏移实现如：
function offset(data) {
var j = -1,
m = data[0].length,
y0 = [];
while (++j < m) y0[j] = 0;
return y0;
}
# stack.order([order])
如果指定order，设置堆叠的排序为指定的order；如果未指定，则返回当前的order。以下字符串类型的值可被使用：
• inside-out - 通过最大值的索引进行排序，然后使用平衡加权；
• reverse - 反转输入层的次序；
• default - 使用输入层顺序；
另外order也可以是函数；输入到该函数的是层数据，并已被标准化显示：一个二维的值数组，每个元素被表示为一个二元素的数组[x, y]；该函数的返回值必须是一个表示层顺序的索引数组。例如，默认的顺序实现如：
function order(data) {
return d3.range(data.length);
}
参见 d3.range.
# stack.x([accessor])
指定如何访问每个值位置中的x坐标。如果指定accessor，则设置访问器为指定的函数；如果未指定accessor，则返回当前绑定的访问器函数；在默认情况下假定每个输入值都有x属性：
function x(d) {
return d.x;
}
X访问器会被每一个输入值调用，并且每一层，被传递的参数有当前数据(d)和数据元素索引(i)；返回值必须是一个数字；虽然x访问器会被每层调用，堆叠布局是假定所有层的x坐标是一致的；也就是说，堆叠布局目前需要每层都是均匀的，在相同的x坐标下，都必须包含相同个数的值；如果你的数据不符合这种规则，在你进行堆叠布局前需要整理好数据符合这种规则。
# stack.y([accessor])
指定如何访问每个值位置中的y坐标。如果指定accessor，则设置访问器为指定的函数；如果未指定accessor，则返回当前绑定的访问器函数；在默认情况下假定每个输入值都有y属性：
function y(d) {
return d.y;
}
X访问器会被每一个输入值调用，并且每一层，被传递的参数有当前数据(d)和数据元素索引(i)；返回值必须是一个数字；随着异常的扩大偏移，堆叠布局不会执行任何的数据自动缩放；为了简化缩放，可以使用关联的线性缩放linear scale或其他类似的。
# stack.out([setter])
指定如何传递计算的基线给上层；如果指定setter，它将被用作该输出/传递功能上；如果未指定setter，则返回当前的setter；默认情况下假定每个输入值都有y和y0属性：
function out(d, y0, y) {
d.y0 = y0;
d.y = y;
}
setter会被每一个输入值调用，并且每一层，被传递的参数有当前数据(d)，已计算的y0值和已计算的y厚度；在除了expand偏移的所有情况下，y厚度是相同于y的返回值，因此可被忽略。
* 魏飞译 2014.07.08.10.04
* gulu 校对 2014-12-6 23:08:08
饼布局
最后更新于：2022-04-01 11:12:01
> [Wiki](Home) ▸ [[API--中文手册]] ▸ [[布局]] ▸ **饼布局**
* 如发现翻译不当或有其他问题可以通过以下方式联系译者:
* 邮箱：zhang_tianxu@sina.com
* QQ群：[D3数据可视化](http://jq.qq.com/?_wv=1027&k=ZGcqYF)205076374，[大数据可视化](http://jq.qq.com/?_wv=1027&k=S8wGMe)436442115
饼布局方便与计算组成饼图或圈图的弧的开始和结束的角度：
饼布局并不是只能绘制饼状图，如果你喜欢，你还可以直接用她来绘制弧形状。饼布局会简单的将一个数据数组（如字符串数据）转换成一个对象数据，这个对象数组中会包含开始角度和结束角度，这些角度的范围为0到2π，然后传给弧形生成器。
# d3.layout.pie()
构造一个新的饼图函数，使用默认的值访问器（数值）、进行比较排序（降序）、开始角度（0）、结束角度（2π）；返回的布局对象即是对象也是一个函数，这就意味着：你可以想调用方法一样调用该布局对象，布局还具有改变其行为的其他方法；就像D3的其他类型方法一样，饼布局也支持方法链模式，setter方法返回布局自身，允许在一个简单的申明中调用多个setter方法。
# pie(values[, index])
用指定的values数组计算饼函数。一个可选的index 参数会被传递给开始和结束的函数；返回值是一个数组，数组元素包含以下属性：
• value - 数据值，计算来自于value 生成器；
• startAngle - 弧的开始弧度，非角度；
• endAngle - 弧的结束弧度，非角度；
• data - 数据原生的值；
按照原生的排序返回元素，匹配values参数，即使排序顺序已经应用了；这保证了数组中每个元素原生的索引，这是非常好的，当你使用原生的值数组来匹配颜色分类时。
# pie.value([accessor])
指定如何从关联的数据提取值（如：给饼图绑定一个访问器函数）；accessor 是一个函数，会在每个输入值传给pie时调用，原理相当于在计算饼布局前，先调用了values.map(accessor)；该函数可以传两个参数：当前的数据d和所在索引i；默认的值函数是内置的Number，类似于特征函数；如果未指定accessor ，则返回当前的访问器 。
# pie.sort([comparator])
如果指定comparator ，则设置数据的排序方法为指定的；传入null来禁止排序；如果未指定comparator ，则返回当前的comparator ；默认的排序方法是降序；排序会保留原生数据的索引，只会影响到角度；排序函数会在每对传给 pie的数据上调用；当然，该排序函数你可以使用 d3.ascending 或 d3.descending代替。
# pie.startAngle([angle])
如果指定angle ，则设置饼布局所有的起始弧度为指定值：如果未指定angle ，返回当前的值，默认为0；起始弧度可以被指定为常数或一个函数，如果是函数，当 pie被调用时，会进行一次起始弧度的计算，被传递的参数有：当前数据d和索引i。
# pie.endAngle([angle])
如果指定angle ，则设置饼布局所有的起始弧度为指定值：如果未指定angle ，返回当前的值，默认为2π；起始弧度可以被指定为常数或一个函数，如果是函数，当 pie被调用时，会进行一次起始弧度的计算，被传递的参数有：当前数据d和索引i。
* 魏飞译 2014-07-16-19-25
* 咕噜校对 2014-11-30 21:19:34
分区布局
最后更新于：2022-04-01 11:11:58
> [Wiki](Home) ▸ [[API--中文手册]] ▸ [[布局]] ▸ [层次布局](层次布局) ▸ **分区布局**
* 如发现翻译不当或有其他问题可以通过以下方式联系译者:
* 邮箱：zhang_tianxu@sina.com
* QQ群：[D3数据可视化](http://jq.qq.com/?_wv=1027&k=ZGcqYF)205076374，[大数据可视化](http://jq.qq.com/?_wv=1027&k=S8wGMe)436442115
分区布局将会产生邻接的图形：一个节点链的树图的空间填充转化体。节点将被绘制为实心区域图（无论是弧还是矩形），而不是在层次结构中绘制父子间链接，节点将被绘制成固定区域（弧度或者方形），并且相对于其它节点的位置显示它们的层次结构中的位置。节点的尺寸将编码为一个量化的维度，这将难以在一个节点链图中展示。
就像D3的其他类，布局将遵循方法链模式，setter方法返回布局本身，并通过一个简洁的语句来调用多个setter方法。
# d3.layout.partition()
创建一个新的带有默认设置的分区布局：默认为值降序的排序顺序；默认值的访问器假定为每一个输入值是一个带有数值属性的对象；默认子值的访问器假定为每一个输入值是一个带有子值数组的对象，大小为1为1×1。
# partition(root)
# partition.nodes(root)
运行分区布局，将返回指定根节点的相关联的节点阵列数组。分区布局是D3家族分层布局中的一部分。这些布局将遵循相同的基本结构：传递给布局的输入参数值是层次结构的根节点，并且输出返回值将是一个代表所有节点经过计算的位置的数组。每个节点上将拥有以下几个属性：
• parent - 父节点，或空的根节点。
• children - 子节点的阵列数组，或者为空的叶节点。
• value - 该节点的值，值访问器所返回的值。
• depth - 节点的深度（即节点的层级数），根节点为0。
• X–节点位置的最小x坐标。
• y–节点位置的最小y坐标。
• dx - 节点位置的x范围。
• dy - 节点位置的y范围。
虽然布局只有一个x和y尺寸，但它却可以表示一个任意的坐标系；例如，你可以把X作为半径、y作为角度用以产生径向而非笛卡尔布局。在笛卡尔取向上，x，y，dx和dy分别相当于SVG矩形元素的“x”，“y”，“width”和“height”属性。在径向取向上，它们可以被用于计算弧生成器的innerRadius，startAngle，outerRadius和endAngle。笛卡尔取向可被称为冰柱树，而径向取向被称为旭日图。
# partition.links(nodes)
给定指定的节点数组，比如这些返回的节点，将返回一个对象数组，该数组表示从父到子的每个节点的链接。叶节点将不会有任何的链接。每个链接是一个对象，每个对象具有以下两个属性：
• source - 父节点（如上所述）。
• target - 子节点。
此方法适用于检索一组适于显示的链接描述，通常与对角线形状生成器结合使用。例如：
svg.selectAll("path")
.data(partition.links(nodes))
.enter().append("path")
.attr("d", d3.svg.diagonal());
# partition.children([children])
如果指定了children，将设置指定的children访问器方法。如果没有指定children，则返回当前的children访问器方法，默认输入数据是一个带有一个children数组的对象：
function children(d) {
returnd.children;
}
通常情况下，使用d3.json可以很方便地装入节点层次结构，并且将输入层次结构作为嵌套JSON对象。例如：
{
"name": "flare",
"children": [
{
"name": "analytics",
"children": [
{
"name": "cluster",
"children": [
{"name": "AgglomerativeCluster", "size": 3938},
{"name": "CommunityStructure", "size": 3812},
{"name": "MergeEdge", "size": 743}
]
},
{
"name": "graph",
"children": [
{"name": "BetweennessCentrality", "size": 3534},
{"name": "LinkDistance", "size": 5731}
]
}
]
}
]
}
children访问器将在层次结构根节点中首先被调用。如果访问器返回null，则该节点被认为为叶节点，直到布局遍历终止。否则，访问器就会返回一个表示子节点的数据元素的数组。
# partition.sort([comparator])
如果指定的comparator，将使用指定的比较方法来设置为布局的同级节点的排序顺序。如果没有指定comparator，返回当前组的排序顺序，其默认为相关的输入数据的数值属性降序排列：
function comparator(a, b) {
returnb.value - a.value;
}
比较器方法用来被节点对调用，此节点对传递给每个节点的输入数据。若比较器方法为null，则排序将被禁用，之后将使用树的遍历顺序。比较器方法也可以使用d3.ascending或d3.descending实现。
# partition.value([value])
如果指定value，便将其设置为指定的访问器方法。否则返回当前值访问器，即输入数据是一个带有数值属性的对象：
function value(d) {
returnd.value;
}
值访问器将被每个输入的数据元素调用，并且一定会返回一个数字，该数字表示该节点的数值属性值。此值将被成比例的设置每个节点的面积值。
# partition.size([size])
如果指定的size，将通过指定的二元素数组[x,y]设置为有效布局的大小。如果没有指定size，返回当前布局大小，默认为1×1。
* Harry 译 2014-11-29
* 咕噜校对 2014-11-30 21:02:50
包布局
最后更新于：2022-04-01 11:11:56
> [Wiki](Home) ▸ [[API--中文手册]] ▸ [[布局]] ▸ **包布局**
* 如发现翻译不当或有其他问题可以通过以下方式联系译者:
* 邮箱：zhang_tianxu@sina.com
* QQ群：[D3数据可视化](http://jq.qq.com/?_wv=1027&k=ZGcqYF)205076374，[大数据可视化](http://jq.qq.com/?_wv=1027&k=S8wGMe)436442115
下图采用包含（嵌套）来展现层级结构。每一个叶子节点的大小都显示了每个数据点数量的大小。如图所示，通过小圈的大小累积逐渐接近于一个大圈，但要注意的是，由于空间上的浪费，在层级之间也会存在一些失真，但只要叶子节点可以精确的比较就行。尽管圆形填充没有像treemap那样，高效率的使用了空间，空间上的浪费反而清晰地展现了分层效果。
通过展开层级，pack layout 也可以被用来创建bubble charts（气泡图表）。
和D3中其他类相似，layout中的布局遵循方法链模式，其中setter方法返回布局本身，并允许在一个简单语句中调用多个setter方法。
# d3.layout.pack()
使用默认设置创建一个新的包布局，默认的排序顺序是按值升序排序；默认的子访问器，假设每一个输入数据都是一个带有子数组的对象，默认的大小是1×1。
# pack(root)
# pack.nodes(root)
运行包布局，返回与指定根节点root相关联的节点的数组。簇布局是D3家族分层布局中的一部分。这些布局遵循相同的基本结构：将输入参数传递给布局是层次的根节点root ，输出的返回值是一个代表所有节点计算出的位置的数组。每个节点上填充以下几个属性：
• parent – 父节点，或根节点为null。
• children – 子节点数组，或叶子节点为null。
• value –节点的值，作为访问器返回的值。
• depth –节点的深度，根节点从0开始。
• x –计算的节点位置的x坐标。
• y –计算的节点位置的y坐标。
• r – 计算的节点半径。
# pack.links(nodes)
给定一个特定节点的数组nodes，例如由节点返回的，返回表示每个节点的从父母到孩子链接的对象数组。而叶子节点将不会有任何的链接。每个链接都是一个对象，且具有两个属性：
• source –父节点（正如上述描述的那样）。
• target –子节点。
此方法检索一组适合展示的链接描述很有用，通常与对角线形状发生器一起用。例如：
svg.selectAll("path")
.data(cluster.links(nodes))
.enter().append("path")
.attr("d", d3.svg.diagonal());
# pack.children([children])
如果指定children 参数，则设置特定的孩子访问器函数。如果children没有指定，则返回当前孩子访问函数，默认假定输入的数据是一个带有孩子数组的对象：
function children(d) {
return d.children;
}
通常情况下，可以使用d3.json很方便加载节点层次结构，代表输入层次结构的嵌套JSON对象。例如：
{
"name": "flare",
"children": [
{
"name": "analytics",
"children": [
{
"name": "cluster",
"children": [
{"name": "AgglomerativeCluster", "size": 3938},
{"name": "CommunityStructure", "size": 3812},
{"name": "MergeEdge", "size": 743}
]
},
{
"name": "graph",
"children": [
{"name": "BetweennessCentrality", "size": 3534},
{"name": "LinkDistance", "size": 5731}
]
}
]
}
]
}
孩子的访问器是第一次被层次中的根节点调用。如果存取器返回null，则该节点被假定为叶节点并且布局遍历终止。否则，访问器应返回表示子节点的数据元素的数组。
# pack.sort([comparator])
如果comparator 比较器指定了，则使用特定的比较器函数，设置同级节点布局的排序顺序。如果comparator 没有指定，则返回当前组排序顺序，默认为升序排列，按通过相关的输入数据的数值属性来排序：
function comparator(a, b) {
return a.value - b.value;
}
这个比较器的函数被节点对调用，输入的数据传递给每个节点。空比较器禁止排序，使用树遍历的顺序。比较器函数也可以使用d3.ascending或d3.descending来实现排序。
# pack.value([value])
如果value 值指定了，则设置值访问器为指定的函数。如果value 值未指定，则返回当前的值访问器，其中假定输入数据是一个带有一个数字值属性的对象：
function value(d) {
return d.value;
}
对每一个输入的数据元素调用值访问器，并且必须返回一个数字，来表示该节点的数值。此值被用来按比例设置每个圆的面积为value。但是请注意，圆圈大小是严格地只在叶节点之间才存在可比性；内部的节点无法准确地比较，因为在打包子圆圈和他们父母之间还留有空白。
# pack.size([size])
如果指定了大小size，则设定可用的布局大小为指定的表示x和y的二元数组。如果size 大小没有指定，则返回当前大小，默认为1×1。
# pack.radius([radius])
如果指定了半径radius，则设置半径的函数，用于计算每个节点的半径。如果半径radius为空，因为默认情况下，半径自动从节点值确定，且调整为适合的布局大小。如果半径radius未指定，则返回当前的半径函数，默认为null。此半径radius 也可为均匀的圆大小指定为一个恒定数目。
# pack.padding([padding])
如果指定padding ，则设置相邻圈之间的大概填充，以像素为单位。如果没有指定padding ，则返回当前的填充，默认为0。
* 何凯琳译 2014-12-01
* gulu校对2014-12-6 21:32:15
直方图布局
最后更新于：2022-04-01 11:11:54
> [Wiki](Home) ▸ [[API--中文手册]] ▸ [[布局]] ▸ **直方图布局**
* 如发现翻译不当或有其他问题可以通过以下方式联系译者:
* 邮箱：zhang_tianxu@sina.com
* QQ群：[D3数据可视化](http://jq.qq.com/?_wv=1027&k=ZGcqYF)205076374，[大数据可视化](http://jq.qq.com/?_wv=1027&k=S8wGMe)436442115
直方图布局可以用来表示数据分布，通过将离散数据点分组归纳到箱子里。使用实例详见bl.ock 3048450。
# d3.layout.histogram()
使用默认值访问器、范围函数和箱函数，构建新的直方图函数。默认条件下，直方图函数返回值为频率。返回布局对象既是一个对象，也是一个函数。即: 可以像调用其他函数一样调用该布局，并且布局有额外的方法改变自身行为。和D3中的其他类一样，布局遵循方法链模式，在该模式下setter方法返回布局本身，允许使用简单语句调用多个setter。
# histogram(values[, index])
在指定的values数组上计算直方图。可以指定一个可选参数index, 传递给范围函数和箱函数。返回值为数组的数组：外部数组的每个元素表示一个容器，每个容器包含输入values的相关元素。此外，每个容器有三个属性：
• x -箱的下界（包含）。
• dx -箱的宽度；x + dx为上界（不包含）。
• y - the count (if frequency is true), or the probability (if frequency is false).计数（如果frequency为true），或概率（如果frequency为假）。
请注意，在频率方式上，y属性和长度属性相同。
# histogram.value([accessor])
指定从关联数据中提取值的方法；accessor是一个函数，每当输入值传递到histogram时，都需要调用该函数，即等于在计算直方图之前调用values.map(accessor)。默认值函数为内置Number，与恒等函数类似。如果未指定accessor，则返回当前值访问器。
# histogram.range([range])
指定直方图范围。忽略在指定范围之外的值。可以通过二元数组指定range，数组表示范围的最大值和最小值；或者将range指定为一个函数，该函数返回values数组和传递到histogram的当前索引。默认范围为值的长度（minimum和maximum）。如果未指定range，则返回当前范围函数。
# histogram.bins()
# histogram.bins(count)
# histogram.bins(thresholds)
# histogram.bins(function)
详细说明如何将值归类到直方图中。如果没有指定参数，则返回当前箱函数，默认值为Sturges' formula的一个实现，Sturges' formula使用等间隔的值将值划分到不同的箱当中。如果已经指定count值，则将range的值均匀分布到指定数量的箱中。
如果已指定thresholds数组，则它定义了箱的极限值，从最左边的值（最小值）开始到最右边的值（最大值）。n + 1 thresholds指定了n个箱。任何小于thresholds[1]的值都将被放在第一个箱中；同理，任何大于或等于thresholds[thresholds.length - 2]的值将被放在最后一个箱中。因此，虽然第一个和最后一个极值并未分配到箱中，但他们对于定义第一个箱的x属性和最后一个箱的dx属性还是有必要存在的。
最后，如果已经指定箱function，该函数会在布局传递数据时调用，传递当前range，值得数列和当前索引传递到histogram。该函数必须返回上文所述的thresholds数列。
# histogram.frequency([frequency])
指定直方图的y值是否是一个计数（频率）或概率（密度）；默认值为频率。如果没有指定频数，则返回当前频率的布尔值。
张烁译 20140430 咕噜校对 2014-11-30 10:42:08
层次布局
最后更新于：2022-04-01 11:11:52
> [Wiki](Home) ▸ [[API--中文手册]] ▸ [[布局]] ▸ **层次布局**
* 如发现翻译不当或有其他问题可以通过以下方式联系译者:
* 邮箱：zhang_tianxu@sina.com
* QQ群：[D3数据可视化](http://jq.qq.com/?_wv=1027&k=ZGcqYF)205076374，[大数据可视化](http://jq.qq.com/?_wv=1027&k=S8wGMe)436442115
分层布局是一种抽象布局，不直接使用。但它允许在不同的分层布局中共享节点。请看下列例子：
• Cluster -簇实体构成树状图。
• Pack -使用递归圆填充法创建一个分层布局。
• Partition -将节点树递归划分成辐射状或环状。
• Tree -将节点树整齐放置。
• Treemap -使用递归空间划分显示节点树。
虽然不是分层布局，但捆绑布局可以同分层共同使用。
# d3.layout.hierarchy()
使用以下默认设置创建新的分层布局：默认排序顺序为值的降序排列；默认值访问器假定每个输入数据为一个含数值属性的对象；默认子访问器假定每个输入数据为一个含子数列的对象。
# hierarchy(root)
运行分层布局，返回节点数组及指定的根节点。布局的输入参数为分层的根节点，输出返回值为一个数组，表示计算过的所有节点的位置。每个节点都有各自属性：
parent -父节点，在根节点时为空。
children -子节点数组，在叶节点时为空。
value -节点值，由值访问器返回。
depth -节点深度，从根节点计算，值从0开始。
此外，多数分层布局也会计算节点的x和y的位置；详见实现类。
# hierarchy.links(nodes)
指定节点数组返回一个对象数组，该数组表示每个节点中父节点同子节点之间的关系。叶节点没有任何关系。每个节点都是一个具有两个属性的对象：
源-父节点（如上述所示）。
目标-子节点。
该方法在获取一组关系描述时很有效果，通常与对角图形生成器共同使用。例如：
svg.selectAll("path")
.data(partition.links(nodes))
.enter().append("path")
.attr("d",d3.svg.diagonal());
# hierarchy.children([accessor])
如果accessor已经指定，则设定子访问器函数。如未指定，则返回当前子访问器函数，该函数将输入数据默认为带子数组的对象：
functionchildren(d){
returnd.children;
}
通常，使用d3.json可以方便地加载节点分层，并将输入分层表示为一个嵌套JSON对象。例如：
{
"name":"flare",
"children":[
{
"name":"analytics",
"children":[
{
"name":"cluster",
"children":[
{"name":"AgglomerativeCluster","size":3938},
{"name":"CommunityStructure","size":3812},
{"name":"MergeEdge","size":743}
]
},
{
"name":"graph",
"children":[
{"name":"BetweennessCentrality","size":3534},
{"name":"LinkDistance","size":5731}
]
}
]
}
]
}
在分层中，子访问器在根节点首先被调用。如果访问器返回值为空，则该节点在布局遍历结束时被假定为叶节点。否则，访问器需要返回数据源数组，来表示子节点。参数node和depth都需要调用访问器。
# hierarchy.sort([comparator])
如已指定comparator，则使用指定的comparator函数设定布局的同级节点节点顺序。如comparator未指定，则返回当前分组的排序顺序，默认值为按照输入数据的字符串名对节点的降序顺序排序：
functioncomparator(a,b){
returnb.value-a.value;
}
为每对节点，调用comparator函数。零comparator禁用排序，使用树遍历顺序。comparator函数也可以通过d3.ascending或d3.descending实现。
# hierarchy.value([value])
如果已经指定value，则用指定的函数设定值访问器。如果尚未指定value，则返回当前值访问器。默认访问器假定输入数据为一个具有数值属性的对象：
functionvalue(d){
returnd.value;
}
每次输入数据元素，都会调用值访问器，并且必须返回一个用以表示节点数值的数字。对于区域布局，如树图，该值用于设定每个节点值相应的面积。对于其他布局，该值对簇布局没有影响。
# hierarchy.revalue(root)
对于一棵指定的树，从根开始重计算每个节点的值，但不需对子节点进行重新排序或重新计算。该方法可以用于对每个节点值进行重新计算，但又不必对分层做出任何结构改变。最初，该方法是用来支持sticky treemaps的。
* 张烁译 20140430
* 咕噜校对 2014-11-30 10:42:08