3f:null 40:["$","title",null,{"children":"5_Learn D3: Shapes | onepisya | Observable"}] 46:[{"id":"68598443a16fce00a89f983b40c3b4c89b15827ac91726b864da942e4fad1b5cc19abaa1d3efd9855a7a2fadb3ef16f7c4365666eb572026a986b69d768bbc34","href":"https://static.observableusercontent.com/files/68598443a16fce00a89f983b40c3b4c89b15827ac91726b864da942e4fad1b5cc19abaa1d3efd9855a7a2fadb3ef16f7c4365666eb572026a986b69d768bbc34","name":"aapl-bollinger.csv","type":"text/csv","lastModified":1660579972289.169,"size":48822}] 44:{"id":"e928456e0f2aa49b","slug":"5_learn-d3-shapes","title":"5_Learn D3: Shapes","thumbnail":"6caa9e859704da4615b91ab7759d2684deebca69c1c761035af57e59b1dcafb7","access_level":"public","create_time":"$D2022-08-15T16:12:52.289Z","update_time":"$D2022-08-17T03:32:53.683Z","view_time":null,"first_public_time":"$D2022-08-15T16:13:07.395Z","has_unpublished_edits":null,"fork":{"id":"91bc0a496747a34d","slug":"learn-d3-shapes","title":"Learn D3: Shapes","owner":{"id":"863951e3ebe4c0ae","login":"d3","name":"D3"}},"stars":1,"starred":false,"owner":{"type":"team","id":"0fe483e8c08c0572","login":"onepisya","name":"onepisya","avatar_url":"https://avatars-next.observableusercontent.com/f153ff05aa3994274d5a61ed6d97bdf9e0a9ab1fe7549a7e79705384d2fc880a","tier":"starter_2024","bio":"","following":false},"version":1124,"publish_version":1124,"role":null,"authored":false,"authors":[{"type":"individual","id":"821368b74f0848d2","login":"onepisya","name":"onepisya","avatar_url":"https://avatars-next.observableusercontent.com/f153ff05aa3994274d5a61ed6d97bdf9e0a9ab1fe7549a7e79705384d2fc880a","tier":null,"bio":"","following":false}],"members":[{"type":"individual","id":"821368b74f0848d2","login":"onepisya","name":"onepisya","avatar_url":"https://avatars-next.observableusercontent.com/f153ff05aa3994274d5a61ed6d97bdf9e0a9ab1fe7549a7e79705384d2fc880a","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":{"id":"d75b5bb613c35fe2","slug":"d3learn","title":"D3Learn","owner":{"id":"0fe483e8c08c0572","login":"onepisya","name":"onepisya"}},"type":"notebook","body":{"titling":"auto","title":"5_Learn D3: Shapes","cells":[{"id":0,"value":"# 5_Learn D3: Shapes\n\nSVG和Canvas是通用的;它们允许任何类型的图形。D3同时用于可视化，因此提供了一个专门的 *shapes* 词汇表，这些“shapes”是生成路径数据(path data)的函数。","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":15,"value":"路径(path) 可以画圆、矩形、线、曲线(squiggles)、俯冲(swoops)、[老虎🐅](https://commons.wikimedia.org/wiki/File:Ghostscript_Tiger.svg)，以及任何你能想象到的东西。\n\n路径形状是在SVG([路径数据语言 SVG path data language](https://www.w3.org/TR/SVG/paths.html#TheDProperty))(或等效的Canvas[路径方法 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":"假设我们想将数年的Apple股票价格视为线条图表(line chart)。这是一个带有日期(date)和关闭(close)列的数据集（“关闭(close)”是指市场关闭时的股票价格）和相应的量表(scales)。","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":"要绘制线条(line)，我们需要以 Mx,y 开头的路径数据(path data) 才能移动到第一个点，然后反复使用 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":"但是 [**d3.line**](/@d3/d3-line) 更方便。调用 **d3.line** 返回默认线生成器(line generator)，并通过调用 *line*.x and *line*.y 。\n我们可以用函数来配置这条线(line)，以返回(return) 给定数据点 `d` 的 `x`和 `y` 位置。\n这些功能检索所需的抽象值（*date*或*count*），并将其转换为视觉位置（通过应用比例(scale)）。","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":"传递数据(data)给线路生成器(line generator)，返回相应的SVG路径数据字符串(svg path data string)，可用于设置路径元素(path element)的 `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":"（为避免重复，我在下面的附录中定义了可重复使用的轴(axis)。每个轴都是一个函数，它需要选择 *g* 元素才能填充。）","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":688,"value":"上面的路径(path) 是用蓝色的描边(stroke)，没有填充(fill)。为了避免通过线段之间的斜切连接引起的误导性尖峰，我将[斜角线 miter limit](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke-miterlimit)设置为 **stroke width** 的 1倍。我也可以使用圆线(round)连接(join)和盖子(caps)。","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":35,"value":"对于面积图，也有类似的 `d3.area` 。一个区域的形状被指定为具有共享 `x值` 的两条线: *area*.y0 是基线(baseline) 和 *area*.y1 是背线(topline)。对于沿图底边有恒定基线的面积图，我们设置 *area*.y0 to *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":"如果您想要一个具有可变基线 (variable baseline-as) 的`area chart`（比如[stacked area chart 堆叠的面积图](/@d3/stacked-area-chart)，[流图 streamgraph](/@d3/streamgraph)或下面的 [Bollinger bands](/@d3/bollinger-bands)中的图表），则可以通过 **area.y0** 代替。\n\n与 *area*.x 和 *area*.y1 一样，每个数据点都会调用这个函数来计算对应的 *y*-value 。","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":"为了通过显示中央移动平均线和日收盘价来完成布林带(Bollinger bands)的显示，我们可以在顶部叠加线。\n因为每个路径元素只能有一个样式，所以我们使用多个颜色来表示路径(path)。","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":"线(line)和区域(areas) 被设计成一起工作: 通过调用 *area*.lineY0 or *area*.lineY1，可以推导出与区域基线(area's baseline) 或背线(topline) 对应的线。\n这对于用顶部或底部描边(stroke) 装饰一个区域 (area) 是有用的。","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":"线条(line) 和区域(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) 提供可配置的插值方法，例如单调性传播的花纹(splines)；然后您可以 [显示缺少数据的空白 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":"当然，可视化不仅是条(bar)，线(line)和区域(areas)。\n\n另一种常见的形状是D3所说的 (圆弧*arc*)，但数学家称之为 *annulus sector*(环面) 。\n\n它的特点是 [饼图 pie charts](/@d3/pie-chart), [甜甜圈 donut charts](/@d3/donut-chart) and [旭日图 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*, and *endAngle* 配置弧度的角度(angles in radians）。上面的 **arc generator** 配置为接受数组 [*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":"上述计算弧角(arc angles) 可能对派 (pie) 或甜甜圈图表(donut chart)很乏味，因此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":"通过为 *count* 属性的 *value* 登录器配置 *pie* 布局，我们可以计算弧形角度，使每个弧的角跨度与其值成正比，并且弧线将弧线从0到2缩合到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":"这些 Object ，每个基准面一个，可以传递到一个具有固定半径的 **arc generator** ，以产生一个甜甜圈(donut chart)。(因为我忍不住展示一点，我将应用填充 padding 和角半径 corner radius。)","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\n .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":1110,"value":"如果我想要将甜甜圈改变成一个 `pie` \n也许我可是尝试修改下 `innerRadius`","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1104,"value":"myArcPie = d3\n .arc()\n .innerRadius(0)\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":1118,"value":"htl.html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":80,"value":"现在我们已经介绍了一些常见的数据图形(data graphics)，让我们看看如何使它们生动起来。\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## Appendix","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":"$W46","stdlib":"1"}} 45:"$44:body"