# d3-shape
Visualizations typically consist of discrete graphical marks, such as [symbols](#symbols), [arcs](#arcs), [lines](#lines) and [areas](#areas). While the rectangles of a bar chart may be easy enough to generate directly using [SVG](http://www.w3.org/TR/SVG/paths.html#PathData) or [Canvas](http://www.w3.org/TR/2dcontext/#canvaspathmethods), other shapes are complex, such as rounded annular sectors and centripetal Catmull–Rom splines. This module provides a variety of shape generators for your convenience.
As with other aspects of D3, these shapes are driven by data: each shape generator exposes accessors that control how the input data are mapped to a visual representation. For example, you might define a line generator for a time series by [scaling](https://github.com/d3/d3-scale) fields of your data to fit the chart:
```js
var line = d3.line()
.x(function(d) { return x(d.date); })
.y(function(d) { return y(d.value); });
```
This line generator can then be used to compute the `d` attribute of an SVG path element:
```js
path.datum(data).attr("d", line);
```
Or you can use it to render to a Canvas 2D context:
```js
line.context(context)(data);
```
For more, read [Introducing d3-shape](https://medium.com/@mbostock/introducing-d3-shape-73f8367e6d12).
## Installing
If you use NPM, `npm install d3-shape`. Otherwise, download the [latest release](https://github.com/d3/d3-shape/releases/latest). You can also load directly from [d3js.org](https://d3js.org), either as a [standalone library](https://d3js.org/d3-shape.v1.min.js) or as part of [D3 4.0](https://github.com/d3/d3). AMD, CommonJS, and vanilla environments are supported. In vanilla, a `d3` global is exported:
```html
<script src="https://d3js.org/d3-path.v1.min.js"></script>
<script src="https://d3js.org/d3-shape.v1.min.js"></script>
<script>
var line = d3.line();
</script>
```
[Try d3-shape in your browser.](https://tonicdev.com/npm/d3-shape)
## API Reference
* [Arcs](#arcs)
* [Pies](#pies)
* [Lines](#lines)
* [Areas](#areas)
* [Curves](#curves)
* [Custom Curves](#custom-curves)
* [Links](#links)
* [Symbols](#symbols)
* [Custom Symbol Types](#custom-symbol-types)
* [Stacks](#stacks)
### Arcs
[<img alt="Pie Chart" src="https://raw.githubusercontent.com/d3/d3-shape/master/img/pie.png" width="295" height="295">](http://bl.ocks.org/mbostock/8878e7fd82034f1d63cf)[<img alt="Donut Chart" src="https://raw.githubusercontent.com/d3/d3-shape/master/img/donut.png" width="295" height="295">](http://bl.ocks.org/mbostock/2394b23da1994fc202e1)
The arc generator produces a [circular](https://en.wikipedia.org/wiki/Circular_sector) or [annular](https://en.wikipedia.org/wiki/Annulus_\(mathematics\)) sector, as in a pie or donut chart. If the difference between the [start](#arc_startAngle) and [end](#arc_endAngle) angles (the *angular span*) is greater than [τ](https://en.wikipedia.org/wiki/Turn_\(geometry\)#Tau_proposal), the arc generator will produce a complete circle or annulus. If it is less than τ, arcs may have [rounded corners](#arc_cornerRadius) and [angular padding](#arc_padAngle). Arcs are always centered at ⟨0,0⟩; use a transform (see: [SVG](http://www.w3.org/TR/SVG/coords.html#TransformAttribute), [Canvas](http://www.w3.org/TR/2dcontext/#transformations)) to move the arc to a different position.
See also the [pie generator](#pies), which computes the necessary angles to represent an array of data as a pie or donut chart; these angles can then be passed to an arc generator.
<a name="arc" href="#arc">#</a> d3.<b>arc</b>() [<>](https://github.com/d3/d3-shape/blob/master/src/arc.js "Source")
Constructs a new arc generator with the default settings.
<a name="_arc" href="#_arc">#</a> <i>arc</i>(<i>arguments…</i>) [<>](https://github.com/d3/d3-shape/blob/master/src/arc.js#L89 "Source")
Generates an arc for the given *arguments*. The *arguments* are arbitrary; they are simply propagated to the arc generator’s accessor functions along with the `this` object. For example, with the default settings, an object with radii and angles is expected:
```js
var arc = d3.arc();
arc({
innerRadius: 0,
outerRadius: 100,
startAngle: 0,
endAngle: Math.PI / 2
}); // "M0,-100A100,100,0,0,1,100,0L0,0Z"
```
If the radii and angles are instead defined as constants, you can generate an arc without any arguments:
```js
var arc = d3.arc()
.innerRadius(0)
.outerRadius(100)
.startAngle(0)
.endAngle(Math.PI / 2);
arc(); // "M0,-100A100,100,0,0,1,100,0L0,0Z"
```
If the arc generator has a [context](#arc_context), then the arc is rendered to this context as a sequence of [path method](http://www.w3.org/TR/2dcontext/#canvaspathmethods) calls and this function returns void. Otherwise, a [path data](http://www.w3.org/TR/SVG/paths.html#PathData) string is returned.
<a name="arc_centroid" href="#arc_centroid">#</a> <i>arc</i>.<b>centroid</b>(<i>arguments…</i>) [<>](https://github.com/d3/d3-shape/blob/master/src/arc.js#L224 "Source")
Computes the midpoint [*x*, *y*] of the center line of the arc that would be [generated](#_arc) by the given *arguments*. The *arguments* are arbitrary; they are simply propagated to the arc generator’s accessor functions along with the `this` object. To be consistent with the generated arc, the accessors must be deterministic, *i.e.*, return the same value given the same arguments. The midpoint is defined as ([startAngle](#arc_startAngle) + [endAngle](#arc_endAngle)) / 2 and ([innerRadius](#arc_innerRadius) + [outerRadius](#arc_outerRadius)) / 2. For example:
[<img alt="Circular Sector Centroids" src="https://raw.githubusercontent.com/d3/d3-shape/master/img/centroid-circular-sector.png" width="250" height="250">](http://bl.ocks.org/mbostock/9b5a2fd1ce1a146f27e4)[<img alt="Annular Sector Centroids" src="https://raw.githubusercontent.com/d3/d3-shape/master/img/centroid-annular-sector.png" width="250" height="250">](http://bl.ocks.org/mbostock/c274877f647361f3df7d)
Note that this is **not the geometric center** of the arc, which may be outside the arc; this method is merely a convenience for positioning labels.
<a name="arc_innerRadius" href="#arc_innerRadius">#</a> <i>arc</i>.<b>innerRadius</b>([<i>radius</i>]) [<>](https://github.com/d3/d3-shape/blob/master/src/arc.js#L230 "Source")
If *radius* is specified, sets the inner radius to the specified function or number and returns this arc generator. If *radius* is not specified, returns the current inner radius accessor, which defaults to:
```js
function innerRadius(d) {
return d.innerRadius;
}
```
Specifying the inner radius as a function is useful for constructing a stacked polar bar chart, often in conjunction with a [sqrt scale](https://github.com/d3/d3-scale#sqrt). More commonly, a constant inner radius is used for a donut or pie chart. If the outer radius is smaller than the inner radius, the inner and outer radii are swapped. A negative value is treated as zero.
<a name="arc_outerRadius" href="#arc_outerRadius">#</a> <i>arc</i>.<b>outerRadius</b>([<i>radius</i>]) [<>](https://github.com/d3/d3-shape/blob/master/src/arc.js#L234 "Source")
If *radius* is specified, sets the outer radius to the specified function or number and returns this arc generator. If *radius* is not specified, returns the current outer radius accessor, which defaults to:
```js
function outerRadius(d) {
return d.outerRadius;
}
```
Specifying the outer radius as a function is useful for constructing a coxcomb or polar bar chart, often in conjunction with a [sqrt scale](https://github.com/d3/d3-scale#sqrt). More commonly, a constant outer radius is used for a pie or donut chart. If the outer radius is smaller than the inner radius, the inner and outer radii are swapped. A negative value is treated as zero.
<a name="arc_cornerRadius" href="#arc_cornerRadius">#</a> <i>arc</i>.<b>cornerRadius</b>([<i>radius</i>]) [<>](https://github.com/d3/d3-shape/blob/master/src/arc.js#L238 "Source")
If *radius* is
没有合适的资源?快使用搜索试试~ 我知道了~
交互数据统计管理面板模板-适配移动端&PC端-HTML网站源码.zip
共2000个文件
js:1416个
html:255个
json:127个
1.该资源内容由用户上传,如若侵权请联系客服进行举报
2.虚拟产品一经售出概不退款(资源遇到问题,请及时私信上传者)
2.虚拟产品一经售出概不退款(资源遇到问题,请及时私信上传者)
版权申诉
0 下载量 97 浏览量
2024-03-31
13:27:04
上传
评论
收藏 54.56MB ZIP 举报
温馨提示
这套HTML源代码文件为您呈现了一个完整的网页模板,适用于各类网站开发需求。它采用了前沿的HTML5和CSS3技术,实现了响应式设计,能够无缝适配各种设备的屏幕尺寸。此外,它还内置了丰富的JavaScript插件,助您轻松实现各种复杂的交互效果。这套源代码文件具有极高的可定制性,您可以根据您的项目需求,对页面布局、颜色和内容进行个性化调整,轻松打造出独具特色的网站。同时,我们的代码结构清晰、注释详细,便于您学习和掌握HTML、CSS和JavaScript等前端技术。无论您是面临课程设计、毕业设计等学术挑战,还是希望在职业发展中展示自己的才华和技能,这套源代码文件都将成为您的得力助手。通过使用这套源代码文件,您将轻松完成网站搭建任务,为您的课程设计或毕业设计增添独特亮点。总之,这套HTML源代码文件是一个高效、实用且易于上手的工具,无论您是专业的网页设计师,还是业余的编程爱好者,都值得一试。
资源推荐
资源详情
资源评论
收起资源包目录
交互数据统计管理面板模板-适配移动端&PC端-HTML网站源码.zip (2000个子文件)
bootstrap.css 195KB
bootstrap.min.css 158KB
bootstrap-grid.css 66KB
all.css 63KB
fontawesome.css 61KB
ionicons.css 52KB
all.min.css 50KB
bootstrap-grid.min.css 49KB
fontawesome.min.css 49KB
ionicons.min.css 45KB
v4-shims.css 40KB
ionicons-core.css 34KB
export.css 34KB
export.css 34KB
ionicons-core.min.css 28KB
v4-shims.min.css 26KB
select2.css 17KB
select2.min.css 15KB
weather-icons.css 15KB
chartist.css 14KB
iconkit.css 14KB
weather-icons.min.css 13KB
chartist.min.css 11KB
main.css 11KB
iconkit.min.css 11KB
datedropper.css 10KB
bootstrap-slider.css 10KB
bootstrap-slider.min.css 9KB
datedropper.min.css 8KB
normalize.css 8KB
svg-with-js.css 7KB
dataTables.bootstrap4.css 6KB
dataTables.bootstrap4.min.css 5KB
svg-with-js.min.css 5KB
bootstrap-reboot.css 5KB
responsive.bootstrap4.css 5KB
qunit-1.14.0.css 4KB
responsive.bootstrap4.min.css 4KB
bootstrap-reboot.min.css 4KB
c3.css 3KB
examples.css 3KB
c3.min.css 2KB
normalize.min.css 2KB
bars-pill.css 2KB
fontawesome-stars-o.css 1KB
bars-reversed.css 1KB
icon.css 1KB
bars-1to10.css 1KB
bars-horizontal.css 1KB
ammap.css 1KB
bars-movie.css 1KB
bars-square.css 1KB
fontawesome-stars.css 958B
bootstrap-stars.css 949B
highlightjs-github-theme.css 872B
css-stars.css 831B
regular.css 710B
solid.css 703B
brands.css 691B
regular.min.css 657B
solid.min.css 649B
brands.min.css 642B
style.css 478B
style.css 478B
style.css 183B
style.css 183B
_TestSetup.css 174B
testDate.htm 3KB
testTooltip.htm 3KB
testThreshold.htm 3KB
Issue18.htm 3KB
Issue19.htm 2KB
testExampleFillMultiAxis.htm 2KB
testExampleFit.htm 2KB
testSaddlePoint.htm 2KB
testZeroDrop.htm 2KB
testExample.htm 2KB
testSinglePoint.htm 1KB
table-datatable.html 157KB
icons.html 135KB
widget-data.html 128KB
widgets.html 92KB
widget-statistic.html 89KB
form-advance.html 78KB
cheatsheet.html 75KB
layouts.html 74KB
form-addon.html 73KB
form-components.html 64KB
form-picker.html 59KB
range-slider.html 56KB
profile.html 56KB
widget-chart.html 56KB
table-bootstrap.html 55KB
carousel.html 52KB
modals.html 51KB
rating.html 50KB
index.html 49KB
buttons.html 49KB
navigation.html 49KB
calendar.html 47KB
共 2000 条
- 1
- 2
- 3
- 4
- 5
- 6
- 20
资源评论
DTcode7
- 粉丝: 4586
- 资源: 4100
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功