元素 // 以便鼠标 hover 在相应的小矩形之上时，可以显示 tooltip 提示信息 .append("title") // 设置 tooltip 的文本内容 // 其中 d.data.name 是媒介格式名称，d.data.year 是所属的年份 // 而 d.data.value 是具体的营收值 .text(d => `${d.data.name}, ${d.data.year} ${formatRevenue(d.data.value)}`)); // 绘制横坐标轴 svg.append("g") .call(xAxis); // 绘制纵坐标轴 svg.append("g") .call(yAxis); return svg.node(); }34:T12eb,/** * * 对数据进行转换 * */ // 通过堆叠生成器对数据进行转换，便于后续绘制堆叠图 // 返回一个数组，每一个元素都是一个系列（条形图中每个条带就是由多个系列堆叠而成的） // 具体可以参考官方文档 https://d3js.org/d3-shape/stack 或 https://github.com/d3/d3-shape/blob/main/README.md#stacks // 或这一篇笔记 https://datavis-note.benbinbin.com/article/d3/core-concept/d3-concept-shape#堆叠生成器-stacks series = d3.stack() // 设置系列的名称（数组） .keys(colors.keys()) // 采用映射 colors 中的键名称，D3 为每一个系列都设置了一个属性 key，其值是系列名称 // 设置各系列的数据读取函数 // 在调用堆叠生成器对原始数据进行转换过程中，每一个原始数据 d 和系列名称 key（就是在 stack.keys([keys]) 设定的数组中的元素）会作为入参，分别调用该函数，以从原始数据中获取相应系列的数据 // 数据读取函数的逻辑要如何写，和后面 👇👇 调用堆叠生成器时，所传入的数据格式紧密相关 // 因为传入的数据是 map.values() 一个映射的值迭代器（共有 46 个年份的数据） // 遍历数据点时 group 就是依次从迭代器中获取到的一个数据点（一个年份的数据），该数据也是一个映射（包含 23 个格式名称） // 要从中获取相应系列 key 的数据，通过 group.get(key) 获取相应系列（音乐格式名称）的数据（一个对象） .value((group, key) => group.get(key).value) // 设置系列堆叠排序函数，即对应于堆叠条形图中该系列叠放的次序 // 采用 D3 的一种内置的排序函数 d3.stackOrderReverse 堆叠次序和系列名称数组 keys 次序相反 .order(d3.stackOrderReverse) // 调用堆叠生成器，传入数据（并不是直接传入 data 数据集，进行了一些转换处理） // 使用方法 d3.rollup() 对数据集 data 进行分组，并对各分组进行「压缩降维」，返回一个 InternMap 对象 // 具体参考官方文档 d3-array 模块 https://github.com/d3/d3-array#rollup // 或这一篇笔记 https://datavis-note.benbinbin.com/article/d3/core-concept/d3-concept-data-process // 对原始数据 data 中 1058 个元素进行分组，先基于元素的 year 年份进行分组，然后**对各分组再基于 name 格式名称**进行分组 // 最后得到一个嵌套的 InternMap 对象，共有 46 个映射（外层，基于年份） // 而每个映射的值也是一个 InternMap 对象，都有 23 个映射（内层，基于格式名称） // 其实这里使用 d3.rollup() 方法并没有对数据集进行「压缩降维」，只是将数组的扁平化数据结构，变成映射的层级数据结构 // 最后通过 map.values() 返回一个映射的值迭代器，通过循环结构可以遍历所有值（46 个年份的数据） (d3.rollup( // 第一个参数是需要分组的数据 data data, // 第二个参数是对分组进行压缩的函数，每个分组会依次调用该函数（入参就是包含各个分组元素的数组） // 如果存在嵌套分组，则该函数只会被「叶子」分组（嵌套得最深的各个分组）调用，因为这些分组才直接包含原数据集中的元素 // 返回值会作为 InternMap 对象中（各分组的）键值对中的值 // 由于按照年份和格式名称进行分组后，每个嵌套分组中只会有 1 个元素 // 所以这里通过数组解构，读取里面唯一的元素（原始数据集中的元素）并没有进行变换直接返回 ([d]) => d, // 余下的参数是一系列返回**分组依据**的函数 d => d.year, d => d.name).values()) // 最后对于堆叠生成器所返回的数组（嵌套数组）进行遍历，对具体的数据点进行处理，并返回遍历的数据 s // 其中 s 是当前所遍历的元素（共有 46 个元素），它是一个系列的数据（也是一个数组） // 然后在回调函数中对 s（嵌套数组）进行遍历，这些元素是该系列的数据点，每个元素分别对应于不同条带的该堆叠层的值，所以有 23 个元素 // 每一个数据点 d 都是一个二元数组（里面的元素依次对应于堆叠的下边界和上边界），并且具有属性 data（它是一个映射，映射值就是对应的原始数据集的数据点，即 csv 表格中的一行数据） // 这里使用 d.data.get(s.key) 从原始数据点中提取出该系列的数据（s.key 为当前所遍历的系列名称） // 然后通过赋值覆盖原始值 d.data = d.data.get(s.key) // 相当于简化了 d.data 的数据 .map(s => (s.forEach(d => d.data = d.data.get(s.key)), s))35:T7b6,// 绘制横坐标轴 xAxis = g => g // 通过设置 CSS 的 transform 属性将横坐标轴容器「移动」到底部 .attr("transform", `translate(0,${height - margin.bottom})`) // 横轴是一个刻度值朝下的坐标轴 // 💡 注意这里使用的是方法 selection.call(axis) 的方式来调用坐标轴对象（方法） // 会将选择集中的元素 <g> 传递给坐标轴对象的方法，作为第一个参数 // 以便将坐标轴在相应容器内部渲染出来 // 具体参考官方文档 https://d3js.org/d3-selection/control-flow#selection_call 或 https://github.com/d3/d3-selection#selection_call // 或这一篇文档 https://datavis-note.benbinbin.com/article/d3/core-concept/d3-concept-data-binding#其他方法 .call(d3.axisBottom(x) // 自定义坐标轴的刻度值 // 通过 axis.tickValues([values]) 传递一个数组，用其中的元素覆盖比例尺自动生成的刻度值 // 方法 d3.ticks(start, stop, count) 根据 count 数量对特定范围（由 start 和 stop 指定）进行均分 // 返回一个包含一系列分隔值的数组，用作刻度值 // 第一、二个参数 start 和 stop 分别指定范围的起始和结束值 // 这里先通过 d3.extent(x.domain()) 获取横坐标轴比例尺的定义域范围，在通过解构来获取 start 和 stop // 第三个参数 count 作为分割数量的参考值，避免过多的刻度值出现，相互重叠影响阅读 // 具体参考官方文档 https://d3js.org/d3-array/ticks#ticks 或 https://github.com/d3/d3-array/tree/main#ticks // 或这一篇笔记 https://datavis-note.benbinbin.com/article/d3/core-concept/d3-concept-data-process#刻度生成 .tickValues(d3.ticks(...d3.extent(x.domain()), width / 80)) // 将坐标轴的外侧刻度 tickSizeOuter 长度设置为 0（即取消坐标轴首尾两端的刻度） .tickSizeOuter(0)) 36:[{"id":"bc1d6e93fd1c8625c67a7afb0406aa0e6d956c0719b8b6f0b0348dc86f9f8f1423e1e157dcda317c9d13622598699a0b3feca27b361f934033ce302f88230607","href":"https://static.observableusercontent.com/files/bc1d6e93fd1c8625c67a7afb0406aa0e6d956c0719b8b6f0b0348dc86f9f8f1423e1e157dcda317c9d13622598699a0b3feca27b361f934033ce302f88230607","name":"music.csv","type":"text/csv","lastModified":1692344458730.286,"size":37228}] 31:{"id":"a45e452a076bd90c","slug":"revenue-by-music-format-1973-2018","title":"Revenue by Music Format, 1973–2018","thumbnail":"4f909a7212e6a4d26102dde0222053a2b51fbfc83c7c3609455880e389c7f4c2","access_level":"public","create_time":"$D2023-08-18T07:40:58.730Z","update_time":"$D2023-08-19T04:16:19.923Z","view_time":null,"first_public_time":"$D2023-08-18T07:40:58.730Z","fork":{"id":"7babbae81635eb14","slug":"revenue-by-music-format-1973-2018","title":"Revenue by music format, 1973–2018","owner":{"id":"863951e3ebe4c0ae","login":"d3","name":"D3"}},"stars":0,"starred":false,"owner":{"type":"team","id":"c1515c64803515f3","login":"benbinbin","name":"Benbinbin","avatar_url":"https://avatars-next.observableusercontent.com/a7b4db79ed7370d2e2eceb24cb23938e43bee081e330b61ebda110c76ec95546","tier":"starter_2024"},"version":726,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"cf8a59a391159895","login":"benbinbin","name":"Benbinbin","avatar_url":"https://avatars-next.observableusercontent.com/a7b4db79ed7370d2e2eceb24cb23938e43bee081e330b61ebda110c76ec95546","tier":null}],"members":[{"type":"individual","id":"cf8a59a391159895","login":"benbinbin","name":"Benbinbin","avatar_url":"https://avatars-next.observableusercontent.com/a7b4db79ed7370d2e2eceb24cb23938e43bee081e330b61ebda110c76ec95546","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":{"id":"45b9178039aca26c","slug":"bar-chart","title":"Bar Chart","owner":{"id":"c1515c64803515f3","login":"benbinbin","name":"Benbinbin"}},"type":"notebook","body":{"title":"Revenue by Music Format, 1973–2018","cells":[{"id":0,"value":"# Revenue by Music Format, 1973–2018\n堆叠条形图展示了音乐产业在 1973-2018 年间的收益，并按（媒介）格式进行划分\n\n数据来源：[RIAA](https://www.riaa.com/u-s-sales-database/)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":280,"value":"legend = swatches({color, columns: \"130px 4\", marginLeft: margin.left})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":57,"value":"$33","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3,"value":"// 读取 csv 文件\n// 参考 d3-dsv 模块 https://github.com/d3/d3-dsv\n// 或这一篇笔记 https://datavis-note.benbinbin.com/article/d3/core-concept/d3-concept-fetch-and-parse-data\n// 这里使用 d3.csvParse(string, row) 来解析数据\n// 其中第一个参数 string 是 csv 字符串\n// 第二个参数 row 是每一行数据的 accessor 读取函数\n// 这里的 accessor 读取函数的作用是先通过对象解构的方式，只读取每行数据的其中三个属性 Format、Year、\"Revenue (Inflation Adjusted)\"（采用经过通胀校正的数据），然后对这些属性进行重命名以及属性值进行格式转换（字符串变成数值）\n// 返回一个对象数组，每一个对象对应于 csv 表格的一行数据\n// D3 还会为数组添加一个 columns 属性，其属性值是一个数组，元素分别是原数据的列属性（即原来的二维数据表的表头信息）\n// 最后还通过 Object.assign() 为该数组添加一个对象 {y: \"Revenue (billions, adj.)\"} 作为纵坐标轴的标注信息\ndata = Object.assign(d3.csvParse(await FileAttachment(\"music.csv\").text(), ({Format, Year, [\"Revenue (Inflation Adjusted)\"]: Revenue}) => ({name: Format, year: +Year, value: +Revenue})), {y: \"Revenue (billions, adj.)\"})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":527,"value":"// 设置图例\n// 将不同的音乐媒介格式映射为不同的颜色\n// 共 23 种不同的音乐媒介格式，对应于堆叠条形图中 23 个系列\n// 由于不同的音乐媒介存续的时期不同，所以并不是每一个条带都包含完整的 23 个堆叠层\ncolors = new Map([\n // 黒胶/磁带\n [\"LP/EP\", \"#2A5784\"],\n [\"Vinyl Single\", \"#43719F\"],\n [\"8 - Track\", \"#5B8DB8\"],\n [\"Cassette\", \"#7AAAD0\"],\n [\"Cassette Single\", \"#9BC7E4\"],\n [\"Other Tapes\", \"#BADDF1\"],\n // CD/DVD\n [\"Kiosk\", \"#E1575A\"],\n [\"CD\", \"#EE7423\"],\n [\"CD Single\", \"#F59D3D\"],\n [\"SACD\", \"#FFC686\"],\n [\"DVD Audio\", \"#9D7760\"],\n [\"Music Video (Physical)\", \"#F1CF63\"],\n // 离线下载\n [\"Download Album\", \"#7C4D79\"],\n [\"Download Single\", \"#9B6A97\"],\n [\"Ringtones & Ringbacks\", \"#BE89AC\"],\n [\"Download Music Video\", \"#D5A5C4\"],\n [\"Other Digital\", \"#EFC9E6\"],\n [\"Synchronization\", \"#BBB1AC\"],\n // 在线播放\n [\"Paid Subscription\", \"#24693D\"],\n [\"On-Demand Streaming (Ad-Supported)\", \"#398949\"],\n [\"Other Ad-Supported Streaming\", \"#61AA57\"],\n [\"SoundExchange Distributions\", \"#7DC470\"],\n [\"Limited Tier Paid Subscription\", \"#B4E0A7\"]\n])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":258,"value":"$34","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":647,"value":"// 📝 该 cell 只是用于演示效果\nd3.rollup(data, ([d]) => d, d => d.year, d => d.name)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":40,"value":"// 设置横坐标轴的比例尺\n// 横坐标轴的数据是条形图的各种分类（不同年份），使用 d3.scaleBand 构建一个带状比例尺\n// 使用 d3-scale 模块\n// 具体参考官方文档 https://d3js.org/d3-scale/band 或 https://github.com/d3/d3-scale#scaleBand\n// 或这一篇笔记 https://datavis-note.benbinbin.com/article/d3/core-concept/d3-concept-scale#带状比例尺-band-scales\nx = d3.scaleBand()\n // 设置定义域范围\n // 直接将 data 数据集中所提取到的年份作为定义域的数组，虽然存在重复值，但是并不影响映射 ❓\n // 由于 D3 会在内部使用 InternMap 对数据进行去重后再映射\n .domain(data.map(d => d.year))\n // 设置值域范围\n // svg 元素的宽度（减去留白区域）\n // 使用 scale.rangeRound() 方法，可以进行修约，以便实现整数（46 个年份）映射到整数（像素）\n .rangeRound([margin.left, width - margin.right])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":42,"value":"// 设置纵坐标轴的比例尺\n// 纵坐标轴的数据是连续型的数值（营收值），使用 d3.scaleLinear 构建一个线性比例尺\n// 具体参考官方文档 https://d3js.org/d3-scale/linear 或 https://github.com/d3/d3-scale/tree/main#linear-scales\n// 或这一篇笔记 https://datavis-note.benbinbin.com/article/d3/core-concept/d3-concept-scale#线性比例尺-linear-scales\ny = d3.scaleLinear()\n // 设置定义域范围\n // [0, ymax] 其中 ymax 是各年份的音乐在不同（媒介）格式营收的累计值中的最大值\n // 通过 d3.max() 从数据 series 中获取各年份的音乐营收值的最大值\n // 但是系列数据 series 是一个嵌套的数组，所以需要比较复杂的访问函数\n // 第一层 d.max() 的数据访问函数，其入参是当前所遍历的系列数据\n // 第二层的 d.max() 的数据访问函数，其入参是该系列当前所遍历的数据点（某个年份在该媒介格式的营收值）\n // 但是这是计算好的堆叠数据，所以数据点是一个二维数组 [stackBottom, stackTop]，表示某个年份在该媒介格式的营收值在堆叠图中的堆叠位置，因为要获取最大值，所以返回当前系列的堆叠顶部值 stackTop 即可，即二维数组的第二个元素 d[1]\n // 并通过 continuous.nice() 编辑定义域的范围，通过四舍五入使其两端的值更「整齐」nice，便于进行映射\n .domain([0, d3.max(series, d => d3.max(d, d => d[1]))]).nice()\n // 设置值域范围\n // svg 元素的高度（减去留白区域）\n .range([height - margin.bottom, margin.top])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":65,"value":"// 设置颜色比例尺\n// 为不同系列设置不同的配色\n// 使用 d3.scaleOrdinal() 排序比例尺 Ordinal Scales 将离散型的定义域映射到离散型值域\n// 具体参考官方文档 https://d3js.org/d3-scale/ordinal 或 https://github.com/d3/d3-scale/tree/main#scaleOrdinal\n// 或这一篇笔记 https://datavis-note.benbinbin.com/article/d3/core-concept/d3-concept-scale#排序比例尺-ordinal-scales\ncolor = d3.scaleOrdinal()\n // 设置定义域范围\n // 各系列的名称，即 23 个媒介格式\n .domain(colors.keys())\n // 设置值域范围\n // （使用自定义的配色方案）从前面创建的映射 colors 中提取颜色值\n // 通过 colors.values() 返回一个映射的值迭代器，可以在循环结构中遍历获取颜色值\n .range(colors.values())","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":59,"value":"$35","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":61,"value":"// 绘制纵坐标轴\nyAxis = g => g\n // 通过设置 CSS 的 transform 属性将纵向坐标轴容器「移动」到左侧\n .attr(\"transform\", `translate(${margin.left},0)`)\n // 纵轴是一个刻度值朝左的坐标轴\n .call(d3.axisLeft(y)\n // 设定刻度值的格式\n // 通过自定义函数来设置刻度值，比例尺默认生成的每个刻度都会调用该函数\n // 入参 x 是当前所遍历的刻度值，这里将原数值除以 10 亿，并将结果保留到个位数\n // 即纵坐标轴刻度值的单位是 billion\n // JavaScript 中支持数字的缩写，通过在数字后面附加字母 \"e\" 并指定零的个数来缩短数字，1 billion = 1e9\n .tickFormat(x => (x / 1e9).toFixed(0)))\n // 删掉上一步所生成的坐标轴的轴线（它含有 domain 类名）\n .call(g => g.select(\".domain\").remove())\n // 为纵坐标轴添加标注信息\n // 并选中最后一个刻度值，即 <text> 元素，进行复制\n .call(g => g.select(\".tick:last-of-type text\").clone()\n .attr(\"x\", 3) // 设置元素的偏移量\n .attr(\"text-anchor\", \"start\") // 设置文字的对齐方式\n .attr(\"font-weight\", \"bold\") // 设置字体的样式\n .text(data.y)) // 设置文本内容","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":564,"value":"// 用于格式化 tooltip 文本内容\nformatRevenue = x => (+(x / 1e9).toFixed(2) >= 1) \n ? `${(x / 1e9).toFixed(2)}B` // 如果数值大于 10 亿，则以 10 亿作为基数，修约到小数点后 2 位，并添加 B 后缀\n : `${(x / 1e6).toFixed(0)}M` // 如果数值小于 10 亿，则以 100 万作为基数，修约到个位，并添加 M 后缀","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":37,"value":"height = 500 // svg 元素的高","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":38,"value":"// margin 的作用是在 svg 的外周留白，构建一个显示的安全区，以便在四周显示坐标轴\nmargin = ({top: 20, right: 30, bottom: 30, left: 30})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"d3 = require(\"d3@6\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":578,"value":"import {swatches} from \"@d3/color-legend\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W36","stdlib":"1","titling":"auto"}} 32:"$31:body" </article></body></html>

2d:null 2e:["$","title",null,{"children":"Revenue by Music Format, 1973–2018 | Benbinbin | Observable"}] 33:T1486,chart = { /** * * 创建 svg 容器 * */ const svg = d3.create("svg") .attr("viewBox", [0, 0, width, height]); /** * * 绘制条形图内的柱子 * */ // 绘制的步骤与一般的条形图会有所不同 // 因为普通的条形图每一个条带都只是有一个矩形构成 // 而堆叠条形图的每一个条带是由多个小的矩形依次堆叠而成的 // 相应地，它们所绑定/对应的数据结构也不同 // 普通的条形图所绑定的数据是一个数组，页面上每一个条带对应数组中的一个元素 // 而堆叠条形图所绑定的数据是一个嵌套数组，页面上每一个堆叠层分别对应于数组的一个元素（一个系列数据，它也是一个数组），而同一堆叠层的不同小矩形则分别对应于嵌套数组中的一个元素 // 所以需要在绘制堆叠条形图时需要进行数据「二次绑定」 svg.append("g") .selectAll("g") // 返回一个选择集，其中虚拟/占位元素是它们作为各系列的容器 .data(series) // 绑定数据，每个容器对应一个系列数据 .join("g") // 设置颜色，不同系列/堆叠层对应不同的颜色 // 通过对每一个系列（数组具有属性 key）对象解构得到系列的名称 key，再通过颜色比例尺映射 color(key) 得到对应的颜色 .attr("fill", ({key}) => color(key)) // 基于原选择集进行「次级选择」，选择集会发生改变 // 详细介绍可以查看这一篇笔记 https://datavis-note.benbinbin.com/article/d3/core-concept/d3-concept-data-binding#次级选择 .call(g => g.selectAll("rect") // 使用元素为每一堆叠层绘制出一系列的小矩形 // 返回的选择集是由多个分组（各个容器中）的虚拟/占位元素构成的 // ⚠️ 使用 select.selectAll() 所创建的新选择集会有多个分组 // 由于新的选择集会创建多个分组，那么原来所绑定数据与（选择集中的）元素的对照关系会发生改变 // 从原来的一对一关系，变成了一对多关系，所以新的选择集中的元素**不会**自动「传递/继承」父节点所绑定的数据 // 所以如果要将原来选择集中所绑定的数据继续「传递」下去，就需要手动调用 selection.data() 方法，以显式声明要继续传递数据 // 在这种场景下，该方法的入参应该是一个返回数组的**函数** // 每一个分组都会调用该方法，并依次传入三个参数： // * 当前所遍历的分组的父节点所绑定的数据 datum // * 当前所遍历的分组的索引 index // * 选择集的所有父节点 parent nodes // 详细介绍可以查看这一篇笔记 https://datavis-note.benbinbin.com/article/d3/core-concept/d3-concept-data-binding#绑定数据 // 所以入参 d 是一个堆叠系列的数据（即 series 的一个嵌套数组），这里并没有进行额外的处理直接返回，让该系列里的每个数据点都与一个元素绑定 .data(d => d) .join("rect") // 将元素绘制到页面上 // 为每个小矩形分别设置左上角 (x, y) 及其 width 和 height 来确定其定位和形状 // 每个矩形的左上角横轴定位 x 由它所属的年份的名称决定 // 可以通过所绑定数据的属性 d.data.year 来获取 // 使用横坐标轴的比例尺（带状比例尺）进行映射，求出具体的横轴坐标值 .attr("x", d => x(d.data.year)) // 每个矩形的左上角纵轴定位 y 由它的堆叠上边界决定 // 可以通过它所绑定的数据（一个数组）的第二个元素 d[1] 来获取 // 使用纵坐标轴的比例尺（线性比例尺）进行映射，求出具体的纵轴坐标值 .attr("y", d => y(d[1])) // 每个矩形的宽度 // 通过横轴的比例尺的方法 x.bandwidth() 获取 band 的宽度，并减去 1px 作为条带之间的间隔 .attr("width", x.bandwidth() - 1) // 每个矩形的高度 // 由所绑定的数据（一个数组）的两个元素（上边界和下边界）之间的差值所决定 // ⚠️ 注意这里的差值是 y(d[0]) - y(d[1]) 因为 svg 的坐标体系中向下是正方向 // 所以下边界 d[0] 所对应的纵坐标值 y(d[0]) 会更大，减去 y(d[1]) 的值求出的差值才是高度 .attr("height", d => y(d[0]) - y(d[1])) // 最后为每个矩形元素之内添加元素 // 以便鼠标 hover 在相应的小矩形之上时，可以显示 tooltip 提示信息 .append("title") // 设置 tooltip 的文本内容 // 其中 d.data.name 是媒介格式名称，d.data.year 是所属的年份 // 而 d.data.value 是具体的营收值 .text(d => `${d.data.name}, ${d.data.year} ${formatRevenue(d.data.value)}`)); // 绘制横坐标轴 svg.append("g") .call(xAxis); // 绘制纵坐标轴 svg.append("g") .call(yAxis); return svg.node(); }34:T12eb,/** * * 对数据进行转换 * */ // 通过堆叠生成器对数据进行转换，便于后续绘制堆叠图 // 返回一个数组，每一个元素都是一个系列（条形图中每个条带就是由多个系列堆叠而成的） // 具体可以参考官方文档 https://d3js.org/d3-shape/stack 或 https://github.com/d3/d3-shape/blob/main/README.md#stacks // 或这一篇笔记 https://datavis-note.benbinbin.com/article/d3/core-concept/d3-concept-shape#堆叠生成器-stacks series = d3.stack() // 设置系列的名称（数组） .keys(colors.keys()) // 采用映射 colors 中的键名称，D3 为每一个系列都设置了一个属性 key，其值是系列名称 // 设置各系列的数据读取函数 // 在调用堆叠生成器对原始数据进行转换过程中，每一个原始数据 d 和系列名称 key（就是在 stack.keys([keys]) 设定的数组中的元素）会作为入参，分别调用该函数，以从原始数据中获取相应系列的数据 // 数据读取函数的逻辑要如何写，和后面 👇👇 调用堆叠生成器时，所传入的数据格式紧密相关 // 因为传入的数据是 map.values() 一个映射的值迭代器（共有 46 个年份的数据） // 遍历数据点时 group 就是依次从迭代器中获取到的一个数据点（一个年份的数据），该数据也是一个映射（包含 23 个格式名称） // 要从中获取相应系列 key 的数据，通过 group.get(key) 获取相应系列（音乐格式名称）的数据（一个对象） .value((group, key) => group.get(key).value) // 设置系列堆叠排序函数，即对应于堆叠条形图中该系列叠放的次序 // 采用 D3 的一种内置的排序函数 d3.stackOrderReverse 堆叠次序和系列名称数组 keys 次序相反 .order(d3.stackOrderReverse) // 调用堆叠生成器，传入数据（并不是直接传入 data 数据集，进行了一些转换处理） // 使用方法 d3.rollup() 对数据集 data 进行分组，并对各分组进行「压缩降维」，返回一个 InternMap 对象 // 具体参考官方文档 d3-array 模块 https://github.com/d3/d3-array#rollup // 或这一篇笔记 https://datavis-note.benbinbin.com/article/d3/core-concept/d3-concept-data-process // 对原始数据 data 中 1058 个元素进行分组，先基于元素的 year 年份进行分组，然后**对各分组再基于 name 格式名称**进行分组 // 最后得到一个嵌套的 InternMap 对象，共有 46 个映射（外层，基于年份） // 而每个映射的值也是一个 InternMap 对象，都有 23 个映射（内层，基于格式名称） // 其实这里使用 d3.rollup() 方法并没有对数据集进行「压缩降维」，只是将数组的扁平化数据结构，变成映射的层级数据结构 // 最后通过 map.values() 返回一个映射的值迭代器，通过循环结构可以遍历所有值（46 个年份的数据） (d3.rollup( // 第一个参数是需要分组的数据 data data, // 第二个参数是对分组进行压缩的函数，每个分组会依次调用该函数（入参就是包含各个分组元素的数组） // 如果存在嵌套分组，则该函数只会被「叶子」分组（嵌套得最深的各个分组）调用，因为这些分组才直接包含原数据集中的元素 // 返回值会作为 InternMap 对象中（各分组的）键值对中的值 // 由于按照年份和格式名称进行分组后，每个嵌套分组中只会有 1 个元素 // 所以这里通过数组解构，读取里面唯一的元素（原始数据集中的元素）并没有进行变换直接返回 ([d]) => d, // 余下的参数是一系列返回**分组依据**的函数 d => d.year, d => d.name).values()) // 最后对于堆叠生成器所返回的数组（嵌套数组）进行遍历，对具体的数据点进行处理，并返回遍历的数据 s // 其中 s 是当前所遍历的元素（共有 46 个元素），它是一个系列的数据（也是一个数组） // 然后在回调函数中对 s（嵌套数组）进行遍历，这些元素是该系列的数据点，每个元素分别对应于不同条带的该堆叠层的值，所以有 23 个元素 // 每一个数据点 d 都是一个二元数组（里面的元素依次对应于堆叠的下边界和上边界），并且具有属性 data（它是一个映射，映射值就是对应的原始数据集的数据点，即 csv 表格中的一行数据） // 这里使用 d.data.get(s.key) 从原始数据点中提取出该系列的数据（s.key 为当前所遍历的系列名称） // 然后通过赋值覆盖原始值 d.data = d.data.get(s.key) // 相当于简化了 d.data 的数据 .map(s => (s.forEach(d => d.data = d.data.get(s.key)), s))35:T7b6,// 绘制横坐标轴 xAxis = g => g // 通过设置 CSS 的 transform 属性将横坐标轴容器「移动」到底部 .attr("transform", `translate(0,${height - margin.bottom})`) // 横轴是一个刻度值朝下的坐标轴 // 💡 注意这里使用的是方法 selection.call(axis) 的方式来调用坐标轴对象（方法） // 会将选择集中的元素 <g> 传递给坐标轴对象的方法，作为第一个参数 // 以便将坐标轴在相应容器内部渲染出来 // 具体参考官方文档 https://d3js.org/d3-selection/control-flow#selection_call 或 https://github.com/d3/d3-selection#selection_call // 或这一篇文档 https://datavis-note.benbinbin.com/article/d3/core-concept/d3-concept-data-binding#其他方法 .call(d3.axisBottom(x) // 自定义坐标轴的刻度值 // 通过 axis.tickValues([values]) 传递一个数组，用其中的元素覆盖比例尺自动生成的刻度值 // 方法 d3.ticks(start, stop, count) 根据 count 数量对特定范围（由 start 和 stop 指定）进行均分 // 返回一个包含一系列分隔值的数组，用作刻度值 // 第一、二个参数 start 和 stop 分别指定范围的起始和结束值 // 这里先通过 d3.extent(x.domain()) 获取横坐标轴比例尺的定义域范围，在通过解构来获取 start 和 stop // 第三个参数 count 作为分割数量的参考值，避免过多的刻度值出现，相互重叠影响阅读 // 具体参考官方文档 https://d3js.org/d3-array/ticks#ticks 或 https://github.com/d3/d3-array/tree/main#ticks // 或这一篇笔记 https://datavis-note.benbinbin.com/article/d3/core-concept/d3-concept-data-process#刻度生成 .tickValues(d3.ticks(...d3.extent(x.domain()), width / 80)) // 将坐标轴的外侧刻度 tickSizeOuter 长度设置为 0（即取消坐标轴首尾两端的刻度） .tickSizeOuter(0)) 36:[{"id":"bc1d6e93fd1c8625c67a7afb0406aa0e6d956c0719b8b6f0b0348dc86f9f8f1423e1e157dcda317c9d13622598699a0b3feca27b361f934033ce302f88230607","href":"https://static.observableusercontent.com/files/bc1d6e93fd1c8625c67a7afb0406aa0e6d956c0719b8b6f0b0348dc86f9f8f1423e1e157dcda317c9d13622598699a0b3feca27b361f934033ce302f88230607","name":"music.csv","type":"text/csv","lastModified":1692344458730.286,"size":37228}] 31:{"id":"a45e452a076bd90c","slug":"revenue-by-music-format-1973-2018","title":"Revenue by Music Format, 1973–2018","thumbnail":"4f909a7212e6a4d26102dde0222053a2b51fbfc83c7c3609455880e389c7f4c2","access_level":"public","create_time":"$D2023-08-18T07:40:58.730Z","update_time":"$D2023-08-19T04:16:19.923Z","view_time":null,"first_public_time":"$D2023-08-18T07:40:58.730Z","fork":{"id":"7babbae81635eb14","slug":"revenue-by-music-format-1973-2018","title":"Revenue by music format, 1973–2018","owner":{"id":"863951e3ebe4c0ae","login":"d3","name":"D3"}},"stars":0,"starred":false,"owner":{"type":"team","id":"c1515c64803515f3","login":"benbinbin","name":"Benbinbin","avatar_url":"https://avatars-next.observableusercontent.com/a7b4db79ed7370d2e2eceb24cb23938e43bee081e330b61ebda110c76ec95546","tier":"starter_2024"},"version":726,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"cf8a59a391159895","login":"benbinbin","name":"Benbinbin","avatar_url":"https://avatars-next.observableusercontent.com/a7b4db79ed7370d2e2eceb24cb23938e43bee081e330b61ebda110c76ec95546","tier":null}],"members":[{"type":"individual","id":"cf8a59a391159895","login":"benbinbin","name":"Benbinbin","avatar_url":"https://avatars-next.observableusercontent.com/a7b4db79ed7370d2e2eceb24cb23938e43bee081e330b61ebda110c76ec95546","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":{"id":"45b9178039aca26c","slug":"bar-chart","title":"Bar Chart","owner":{"id":"c1515c64803515f3","login":"benbinbin","name":"Benbinbin"}},"type":"notebook","body":{"title":"Revenue by Music Format, 1973–2018","cells":[{"id":0,"value":"# Revenue by Music Format, 1973–2018\n堆叠条形图展示了音乐产业在 1973-2018 年间的收益，并按（媒介）格式进行划分\n\n数据来源：[RIAA](https://www.riaa.com/u-s-sales-database/)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":280,"value":"legend = swatches({color, columns: \"130px 4\", marginLeft: margin.left})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":57,"value":"$33","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3,"value":"// 读取 csv 文件\n// 参考 d3-dsv 模块 https://github.com/d3/d3-dsv\n// 或这一篇笔记 https://datavis-note.benbinbin.com/article/d3/core-concept/d3-concept-fetch-and-parse-data\n// 这里使用 d3.csvParse(string, row) 来解析数据\n// 其中第一个参数 string 是 csv 字符串\n// 第二个参数 row 是每一行数据的 accessor 读取函数\n// 这里的 accessor 读取函数的作用是先通过对象解构的方式，只读取每行数据的其中三个属性 Format、Year、\"Revenue (Inflation Adjusted)\"（采用经过通胀校正的数据），然后对这些属性进行重命名以及属性值进行格式转换（字符串变成数值）\n// 返回一个对象数组，每一个对象对应于 csv 表格的一行数据\n// D3 还会为数组添加一个 columns 属性，其属性值是一个数组，元素分别是原数据的列属性（即原来的二维数据表的表头信息）\n// 最后还通过 Object.assign() 为该数组添加一个对象 {y: \"Revenue (billions, adj.)\"} 作为纵坐标轴的标注信息\ndata = Object.assign(d3.csvParse(await FileAttachment(\"music.csv\").text(), ({Format, Year, [\"Revenue (Inflation Adjusted)\"]: Revenue}) => ({name: Format, year: +Year, value: +Revenue})), {y: \"Revenue (billions, adj.)\"})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":527,"value":"// 设置图例\n// 将不同的音乐媒介格式映射为不同的颜色\n// 共 23 种不同的音乐媒介格式，对应于堆叠条形图中 23 个系列\n// 由于不同的音乐媒介存续的时期不同，所以并不是每一个条带都包含完整的 23 个堆叠层\ncolors = new Map([\n // 黒胶/磁带\n [\"LP/EP\", \"#2A5784\"],\n [\"Vinyl Single\", \"#43719F\"],\n [\"8 - Track\", \"#5B8DB8\"],\n [\"Cassette\", \"#7AAAD0\"],\n [\"Cassette Single\", \"#9BC7E4\"],\n [\"Other Tapes\", \"#BADDF1\"],\n // CD/DVD\n [\"Kiosk\", \"#E1575A\"],\n [\"CD\", \"#EE7423\"],\n [\"CD Single\", \"#F59D3D\"],\n [\"SACD\", \"#FFC686\"],\n [\"DVD Audio\", \"#9D7760\"],\n [\"Music Video (Physical)\", \"#F1CF63\"],\n // 离线下载\n [\"Download Album\", \"#7C4D79\"],\n [\"Download Single\", \"#9B6A97\"],\n [\"Ringtones & Ringbacks\", \"#BE89AC\"],\n [\"Download Music Video\", \"#D5A5C4\"],\n [\"Other Digital\", \"#EFC9E6\"],\n [\"Synchronization\", \"#BBB1AC\"],\n // 在线播放\n [\"Paid Subscription\", \"#24693D\"],\n [\"On-Demand Streaming (Ad-Supported)\", \"#398949\"],\n [\"Other Ad-Supported Streaming\", \"#61AA57\"],\n [\"SoundExchange Distributions\", \"#7DC470\"],\n [\"Limited Tier Paid Subscription\", \"#B4E0A7\"]\n])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":258,"value":"$34","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":647,"value":"// 📝 该 cell 只是用于演示效果\nd3.rollup(data, ([d]) => d, d => d.year, d => d.name)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":40,"value":"// 设置横坐标轴的比例尺\n// 横坐标轴的数据是条形图的各种分类（不同年份），使用 d3.scaleBand 构建一个带状比例尺\n// 使用 d3-scale 模块\n// 具体参考官方文档 https://d3js.org/d3-scale/band 或 https://github.com/d3/d3-scale#scaleBand\n// 或这一篇笔记 https://datavis-note.benbinbin.com/article/d3/core-concept/d3-concept-scale#带状比例尺-band-scales\nx = d3.scaleBand()\n // 设置定义域范围\n // 直接将 data 数据集中所提取到的年份作为定义域的数组，虽然存在重复值，但是并不影响映射 ❓\n // 由于 D3 会在内部使用 InternMap 对数据进行去重后再映射\n .domain(data.map(d => d.year))\n // 设置值域范围\n // svg 元素的宽度（减去留白区域）\n // 使用 scale.rangeRound() 方法，可以进行修约，以便实现整数（46 个年份）映射到整数（像素）\n .rangeRound([margin.left, width - margin.right])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":42,"value":"// 设置纵坐标轴的比例尺\n// 纵坐标轴的数据是连续型的数值（营收值），使用 d3.scaleLinear 构建一个线性比例尺\n// 具体参考官方文档 https://d3js.org/d3-scale/linear 或 https://github.com/d3/d3-scale/tree/main#linear-scales\n// 或这一篇笔记 https://datavis-note.benbinbin.com/article/d3/core-concept/d3-concept-scale#线性比例尺-linear-scales\ny = d3.scaleLinear()\n // 设置定义域范围\n // [0, ymax] 其中 ymax 是各年份的音乐在不同（媒介）格式营收的累计值中的最大值\n // 通过 d3.max() 从数据 series 中获取各年份的音乐营收值的最大值\n // 但是系列数据 series 是一个嵌套的数组，所以需要比较复杂的访问函数\n // 第一层 d.max() 的数据访问函数，其入参是当前所遍历的系列数据\n // 第二层的 d.max() 的数据访问函数，其入参是该系列当前所遍历的数据点（某个年份在该媒介格式的营收值）\n // 但是这是计算好的堆叠数据，所以数据点是一个二维数组 [stackBottom, stackTop]，表示某个年份在该媒介格式的营收值在堆叠图中的堆叠位置，因为要获取最大值，所以返回当前系列的堆叠顶部值 stackTop 即可，即二维数组的第二个元素 d[1]\n // 并通过 continuous.nice() 编辑定义域的范围，通过四舍五入使其两端的值更「整齐」nice，便于进行映射\n .domain([0, d3.max(series, d => d3.max(d, d => d[1]))]).nice()\n // 设置值域范围\n // svg 元素的高度（减去留白区域）\n .range([height - margin.bottom, margin.top])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":65,"value":"// 设置颜色比例尺\n// 为不同系列设置不同的配色\n// 使用 d3.scaleOrdinal() 排序比例尺 Ordinal Scales 将离散型的定义域映射到离散型值域\n// 具体参考官方文档 https://d3js.org/d3-scale/ordinal 或 https://github.com/d3/d3-scale/tree/main#scaleOrdinal\n// 或这一篇笔记 https://datavis-note.benbinbin.com/article/d3/core-concept/d3-concept-scale#排序比例尺-ordinal-scales\ncolor = d3.scaleOrdinal()\n // 设置定义域范围\n // 各系列的名称，即 23 个媒介格式\n .domain(colors.keys())\n // 设置值域范围\n // （使用自定义的配色方案）从前面创建的映射 colors 中提取颜色值\n // 通过 colors.values() 返回一个映射的值迭代器，可以在循环结构中遍历获取颜色值\n .range(colors.values())","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":59,"value":"$35","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":61,"value":"// 绘制纵坐标轴\nyAxis = g => g\n // 通过设置 CSS 的 transform 属性将纵向坐标轴容器「移动」到左侧\n .attr(\"transform\", `translate(${margin.left},0)`)\n // 纵轴是一个刻度值朝左的坐标轴\n .call(d3.axisLeft(y)\n // 设定刻度值的格式\n // 通过自定义函数来设置刻度值，比例尺默认生成的每个刻度都会调用该函数\n // 入参 x 是当前所遍历的刻度值，这里将原数值除以 10 亿，并将结果保留到个位数\n // 即纵坐标轴刻度值的单位是 billion\n // JavaScript 中支持数字的缩写，通过在数字后面附加字母 \"e\" 并指定零的个数来缩短数字，1 billion = 1e9\n .tickFormat(x => (x / 1e9).toFixed(0)))\n // 删掉上一步所生成的坐标轴的轴线（它含有 domain 类名）\n .call(g => g.select(\".domain\").remove())\n // 为纵坐标轴添加标注信息\n // 并选中最后一个刻度值，即 <text> 元素，进行复制\n .call(g => g.select(\".tick:last-of-type text\").clone()\n .attr(\"x\", 3) // 设置元素的偏移量\n .attr(\"text-anchor\", \"start\") // 设置文字的对齐方式\n .attr(\"font-weight\", \"bold\") // 设置字体的样式\n .text(data.y)) // 设置文本内容","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":564,"value":"// 用于格式化 tooltip 文本内容\nformatRevenue = x => (+(x / 1e9).toFixed(2) >= 1) \n ? `${(x / 1e9).toFixed(2)}B` // 如果数值大于 10 亿，则以 10 亿作为基数，修约到小数点后 2 位，并添加 B 后缀\n : `${(x / 1e6).toFixed(0)}M` // 如果数值小于 10 亿，则以 100 万作为基数，修约到个位，并添加 M 后缀","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":37,"value":"height = 500 // svg 元素的高","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":38,"value":"// margin 的作用是在 svg 的外周留白，构建一个显示的安全区，以便在四周显示坐标轴\nmargin = ({top: 20, right: 30, bottom: 30, left: 30})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"d3 = require(\"d3@6\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":578,"value":"import {swatches} from \"@d3/color-legend\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W36","stdlib":"1","titling":"auto"}} 32:"$31:body" </article></body></html>