25:["$","title",null,{"children":"Learn D3: Shapes | 1907040205 | Observable"}] 4b:[{"id":"68598443a16fce00a89f983b40c3b4c89b15827ac91726b864da942e4fad1b5cc19abaa1d3efd9855a7a2fadb3ef16f7c4365666eb572026a986b69d768bbc34","href":"https://static.observableusercontent.com/files/68598443a16fce00a89f983b40c3b4c89b15827ac91726b864da942e4fad1b5cc19abaa1d3efd9855a7a2fadb3ef16f7c4365666eb572026a986b69d768bbc34","name":"aapl-bollinger.csv","type":"text/csv","lastModified":1636804527216.687,"size":48822}] 47:{"id":"8b07186dcf00847a","slug":"learn-d3-shapes","title":"Learn D3: Shapes","thumbnail":"89e6641277bfa75d438ac92a37ab1dc8747114e395b854a470917f78f84586a0","access_level":"public","create_time":"$D2021-11-13T11:55:27.216Z","update_time":"$D2021-11-13T12:43:31.512Z","view_time":null,"first_public_time":"$D2021-11-15T10:18:58.871Z","has_unpublished_edits":null,"fork":{"id":"91bc0a496747a34d","slug":"learn-d3-shapes","title":"Learn D3: Shapes","owner":{"id":"863951e3ebe4c0ae","login":"d3","name":"D3"}},"stars":0,"starred":false,"owner":{"type":"team","id":"a4b7eada444d9b53","login":"1907040205","name":"","avatar_url":null,"tier":"starter_2024","bio":"","followed_by_you":false,"follows_you":false},"version":1074,"publish_version":1074,"role":null,"authored":false,"authors":[{"type":"individual","id":"3fdc14ae238bd407","login":"1907040205","name":"","avatar_url":null,"tier":null,"bio":"","followed_by_you":false,"follows_you":false}],"members":[{"type":"individual","id":"3fdc14ae238bd407","login":"1907040205","name":"","avatar_url":null,"tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Learn D3: Shapes","cells":[{"id":0,"value":"# Learn D3: Shapes\n\nSVG 和 Canvas 故意通用的；它们允许任何类型的图形。同时 D3 用于可视化，因此提供了 *shapes* 的专门词汇表，这些函数是生成路径数据的函数。","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":15,"value":"\n路径可以绘制圆形、矩形、线条、波浪线、俯冲、老虎，以及你能想象到的任何其他东西。路径的形状以 [SVG path data language](https://www.w3.org/TR/SVG/paths.html#TheDProperty)（或等效的 [Canvas path methods](https://html.spec .whatwg.org/multipage/canvas.html#canvaspath))，这类似于你给老式的 [pen plotter](https://en.wikipedia.org/wiki/Plotter) 发出的命令。如：\n\n* Mx,y - 移动到指定点 [*x*, *y*]\n* Lx,y - 画一条线到指定点 [*x*, *y*]\n* hx - 画一条长度为*x*的水平线\n* vy - 绘制一条长度为 *y* 的垂直线\n* z - 关闭当前子路径","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":381,"value":"\n将几年的 Apple 股价可视化为折线图。这是一个带有 *date* 和 *close* 列，以及相应的比例的数据集（“close”是指市场收盘时股票的价格）","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":89,"value":"data = FileAttachment(\"aapl-bollinger.csv\").csv({typed: true})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":91,"value":"x = d3.scaleUtc()\n .domain(d3.extent(data, d => d.date))\n .range([margin.left, width - margin.right])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":92,"value":"y = d3.scaleLinear()\n .domain([0, d3.max(data, d => d.upper)])\n .range([height - margin.bottom, margin.top])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":255,"value":"画折线图，我们需要以Mx,y开头的路径数据移动到第一个点，然后重复 Lx,y 绘制一条线到每个后续点。我们可以通过循环连接点来做。","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":554,"value":"{\n let path = `M${x(data[0].date)},${y(data[0].close)}`;\n for (let i = 1; i < data.length; ++i) {\n path += `L${x(data[i].date)},${y(data[i].close)}`;\n }\n return path;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":593,"value":"\n但是 [d3.line](/@d3/d3-line) 更方便。调用 d3.line 会返回一个默认的线生成器，通过调用 *line*.x 和 *line*.y，我们可以使用函数配置线以返回给定数据点的 *x*- 和 *y*- 位置* d*。这些函数检索所需的抽象值（*date* 或 *count*）并将其转换为视觉位置（通过应用比例）。 ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":294,"value":"line = d3.line()\n .x(d => x(d.date))\n .y(d => y(d.close))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":24,"value":"\n通过行生成器，数据返回相应的 SVG 路径数据字符串，可用于设置路径元素的 *d* 属性。","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":586,"value":"line(data)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":103,"value":"htl.html``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":211,"value":"\n（为了避免重复，在下面的附录中定义了可重用的轴。每个轴都是一个函数，它需要选择 G 元素来填充。）","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":688,"value":"\n上面的路径使用蓝色描边和无填充样式。为了避免由线段之间的斜接连接引起的误导性尖峰，将 [miter limit](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke-miterlimit) 设置为 100% (1×) 笔画宽度。或者，可以使用圆线连接和大写字母。","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":35,"value":"\n对于面积图，也有类似的 d3.area。一个区域的形状被指定为两条共享 *x* 值的线：*area*.y0 是基线，*area*.y1 是顶线。对于沿图表底部边缘具有恒定基线的面积图，将 *area*.y0 设置为 *y*(0)。","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":300,"value":"area = d3.area()\n .x(d => x(d.date))\n .y0(y(0))\n .y1(d => y(d.close))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":140,"value":"htl.html``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":47,"value":"\n如果想要一个具有可变基线的区域 - 如在 [stacked area chart](/@d3/stacked-area-chart)、[streamgraph](/@d3/streamgraph) 或 [Bollinger bands](/@d3/bollinger-bands) 下面——传递 *area*.y0 一个函数。与 *area*.x 和 *area*.y1 一样，将为每个数据点调用此函数以计算相应的 *y* 值。","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":51,"value":"areaBand = d3.area()\n .x(d => x(d.date))\n .y0(d => y(d.lower))\n .y1(d => y(d.upper))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":645,"value":"htl.html``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":648,"value":"\n为了通过显示中央移动平均线和每日收盘价来完成Bollinger bands的显示，我们可以在顶部叠加线。由于每个路径元素只能有一个样式，因此对多个路径使用多种颜色。","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":305,"value":"lineMiddle = d3.line()\n .x(d => x(d.date))\n .y(d => y(d.middle))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":106,"value":"htl.html``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":53,"value":"\nLines和areas旨在协同工作：可以通过分别调用 *area*.lineY0 或 *area*.lineY1 来导出与区域基线或顶线相对应的线条。 ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":286,"value":"htl.html``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":773,"value":"\nLines和areas有更多的特征，不在这里介绍，但提示一些：[radial lines and areas](/@d3/d3-lineradial) 对周期性数据很有用，例如[seasonal temperatures](/@d3/radial-area-chart)； [curves](https://github.com/d3/d3-shape/blob/master/README.md#curves) 提供可配置的插值方法，例如保持单调性的样条；可以[show gaps for missing data](/@d3/area-with-missing-data)。","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":62,"value":"\n当然，可视化不仅仅是bars,lines,areas.\n\n另一种常见的形状是 D3 所称的 *arc*，但数学家会称之为 *环形扇区*。它有[pie charts](/@d3/pie-chart)、[donut charts](/@d3/donut-chart) 和 [sunbursts](/@d3/sunburst)的特征（但不是[arc diagrams] ](/@d3/arc-diagram))。","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":66,"value":"arc = d3.arc()\n .innerRadius(210)\n .outerRadius(310)\n .startAngle(([startAngle, endAngle]) => startAngle)\n .endAngle(([startAngle, endAngle]) => endAngle)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":63,"value":"与 *x* 和 *y* 配置lines和areas的方式类似，arc由 *innerRadius*、*outerRadius*、*startAngle* 和 *endAngle*（角度以弧度表示）配置。上面的弧生成器接受一个数组 [*startAngle*, *endAngle*]。","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":977,"value":"arc([Math.PI / 2, Math.PI]) // from 90° to 180°","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":896,"value":"viewof n = Inputs.range([1, 50], {value: 12, step: 1, label: \"n\"}) ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":820,"value":"htl.html``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":68,"value":"\n对于饼图或圆环图，D3 提供了 [d3.pie](https://github.com/d3/d3-shape/blob/master/README.md#pies) 以方便使用。","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":83,"value":"fruits = [\n {name: \"🍊\", count: 21},\n {name: \"🍇\", count: 13},\n {name: \"🍏\", count: 8},\n {name: \"🍌\", count: 5},\n {name: \"🍐\", count: 3},\n {name: \"🍋\", count: 2},\n {name: \"🍎\", count: 1},\n {name: \"🍉\", count: 1}\n]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":937,"value":"\n通过为 *count* 属性配置带有 *value* 访问器的饼图布局，可以计算弧角，使得每个弧的角度与其值成正比，并且这些弧一起从 0 到 2π 连续跨越。","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":71,"value":"pieArcData = d3.pie()\n .value(d => d.count)\n (fruits)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":73,"value":"\n这些对象（每个数据一个）可以传递到具有固定半径的arc generator以生成圆环图。","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":75,"value":"arcPie = d3.arc()\n .innerRadius(210)\n .outerRadius(310)\n .padRadius(300)\n .padAngle(2 / 300)\n .cornerRadius(8)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":77,"value":"htl.html``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":80,"value":"现在已经介绍了一些常见的数据图形，接下来如何让它们变得生动起来！\n\nNext","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":26,"value":"---\n\n## 附录","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":185,"value":"xAxis = g => g\n .attr(\"transform\", `translate(0,${height - margin.bottom})`)\n .call(d3.axisBottom(x).ticks(width / 80).tickSizeOuter(0))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":187,"value":"yAxis = g => g\n .attr(\"transform\", `translate(${margin.left},0)`)\n .call(d3.axisLeft(y).ticks(height / 40))\n .call(g => g.select(\".domain\").remove())","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":98,"value":"height = 240","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":99,"value":"margin = ({top: 20, right: 30, bottom: 30, left: 40})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W4b","stdlib":"1"}} 24:null