2a:null 2b:["$","title",null,{"children":"Brushable Scatterplot | Benbinbin | Observable"}] 30:Taf4,viewof selection = { // 使用方法 d3.create("svg") 创建一个 svg 元素，并返回一个选择集 selection const svg = d3.create("svg") .attr("viewBox", [0, 0, width, height]) // viewBox 一般设置为与 svg 元素等宽高 .property("value", []); // 为 svg 添加一个属性 value 为了后面刷选时可以记录哪些点被选中 // 创建一个刷选器 const brush = d3.brush() .on("start brush end", brushed); // 监听刷选的全过程（刷选在不同过程会分发三个不同类型的事件），触发回调函数 brushed // 绘制横坐标 svg.append("g") .call(xAxis); // 绘制纵坐标 svg.append("g") .call(yAxis); // 绘制数据点 const dot = svg.append("g") // 在 svg 中添加一个容器元素，并在其上设置一些数据点的通用样式 .attr("fill", "none") .attr("stroke", "steelblue") .attr("stroke-width", 1.5) .selectAll("circle") // 将数据集 data 和一系列「虚拟」的占位元素进行绑定 .data(data) .join("circle") // 将这些生成到容器中 .attr("transform", d => `translate(${x(d.x)},${y(d.y)})`) // 通过 CSS 的偏移 translate 样式来将各个元素移动到相应的位置 .attr("r", 3); // 设置圆的半径大小 svg.call(brush); // 将前面所创建的刷选器绑定到 svg 上 // 刷选器会创建一系列 SVG 元素以展示选区，并响应用户的刷选操作。 // 刷选发生时所触发的回调函数 // 从入参的刷选事件对象中解构出 selection 选区属性 function brushed({selection}) { let value = []; // 如果用户创建了选区 if (selection) { const [[x0, y0], [x1, y1]] = selection; // 将选区解构出各个坐标值 value = dot .style("stroke", "gray") // 先将所有的数据点设置为灰色 .filter(d => x0 <= x(d.x) && x(d.x) < x1 && y0 <= y(d.y) && y(d.y) < y1) // 筛选出所有数据点中满足条件的元素（构成新的选择集），即在 [[x0, y0], [x1, y1]] 范围内的数据点 .style("stroke", "steelblue") // 将选区范围内的数据点设置为蓝色 .data(); // 返回选择集中的元素所绑定的数据所构成的一个数组 } else { // 如果用户取消了选区 dot.style("stroke", "steelblue"); // 将所有的数据点恢复为蓝色 } svg.property("value", value).dispatch("input"); // 设置 svg 的属性 value 值（如果选区为空，则该值为 [] 空数组；如果创建了选区，则该值为选中的数据点所绑定的数据所构成的一个数组），并分发一个 `input` 事件（Observable 会监听，并响应式地改变下一个代码块的值） } return svg.node(); }31:[{"id":"53c407ee531bab128477148c9e28c49dd06bf83a93ae317e58dbb9fc819db0d4f6c4fb9646fa2fe20faad76addee20cfc360eab2362eeaec3340a5e4655b9996","href":"https://static.observableusercontent.com/files/53c407ee531bab128477148c9e28c49dd06bf83a93ae317e58dbb9fc819db0d4f6c4fb9646fa2fe20faad76addee20cfc360eab2362eeaec3340a5e4655b9996","name":"cars-2.csv","type":"application/octet-stream","lastModified":1651837430645.502,"size":20140}] 2e:{"id":"2a5d88ba8fb6ac32","slug":"brushable-scatterplot","title":"Brushable Scatterplot","thumbnail":"98a40bbe4e3c12db8a2808ad1cbd76c8d81b861b2a1e342f45a0d966281c7fcc","access_level":"public","create_time":"$D2022-05-06T11:43:50.645Z","update_time":"$D2024-07-30T05:15:53.279Z","view_time":null,"first_public_time":"$D2022-05-06T11:44:22.265Z","has_unpublished_edits":null,"fork":{"id":"589f9a25112ad1c2","slug":"brushable-scatterplot","title":"Brushable scatterplot","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":307,"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":"9f57789a063278e2","slug":"scatterplot","title":"Scatterplot","owner":{"id":"c1515c64803515f3","login":"benbinbin","name":"Benbinbin"}},"type":"notebook","body":{"titling":"auto","title":"Brushable Scatterplot","cells":[{"id":1,"value":"# Brushable Scatterplot\n\nThis chart shows the inverse relationship between engine power (*y*-axis) and fuel efficiency (*x*-axis) in ${data.length} cars from 1970–1982. Brushing this scatterplot will show the selected data points. \nThanks to [John Alexis Guerra Gómez](/@john-guerra) for suggestions.\n\n该图展示了从 1970-1982 年间的 ${data.length} 辆汽车的引擎马力（*y*轴）和燃料效率（*x*轴）之间呈负相关的情况。该散点图是可刷选的。\n感谢 [John Alexis Guerra Gómez](/@john-guerra) 的建议。","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"$30","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":65,"value":"selection","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":43,"value":"height = 600 // 散点图的高","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":47,"value":"margin = ({top: 20, right: 30, bottom: 30, left: 40}) // 为散点图设置一些「安全」边距","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":51,"value":"// 横坐标轴所使用的比例尺类型\n// 使用 d3-scale 模块 https://github.com/d3/d3-scale 的方法 `d3.scaleLinear()` 创建线性比例尺\nx = d3.scaleLinear()\n // 设置定义域\n // 使用 d3-array 模块 https://github.com/d3/d3-array 的方法 `d3.extent()` 获取 data 各数据点的 x 的范围，作为比例尺的定义域\n // 还使用 d3-scale 模块的连续型比例尺的方法 `continuous.nice()` 通过四舍五入使定义域的两端的值更「整齐」nice\n .domain(d3.extent(data, d => d.x)).nice() \n // 设置值域\n .range([margin.left, width - margin.right]) // 这里的 width 参数是使用了 Observable 标准库 https://observablehq.com/@observablehq/stdlib#widthSection 所提供的功能，其值会随着网页页面大小的改变而响应式地更改","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":55,"value":"// 纵坐标轴所使用的比例尺类型\ny = d3.scaleLinear()\n .domain(d3.extent(data, d => d.y)).nice()\n .range([height - margin.bottom, margin.top])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":103,"value":"// 基于比例尺绘制横坐标轴\n// 这是一个函数，接收一个 D3 选择集作为参数，其中一般只有一个元素，以其作为一个容器（包含坐标轴的轴线和坐标刻度以及坐标值等元素），最后依然返回该选择集\n// 通过一系列的链式调用，主要是使用方法 selection.attr() 为选择集中的元素（当前选择集包含的元素是元素）设置属性\nxAxis = g => g\n .attr(\"transform\", `translate(0,${height - margin.bottom})`) // 将横坐标轴容器定位到底部\n // 以下使用了一系列的 selection.call() 方法，关于其具体作用和用法可以参考 https://github.com/d3/d3-selection#selection_call\n .call(d3.axisBottom(x)) // 使用方法 d3.axisBottom(scale) 生成一个朝下的坐标轴（对象），即其刻度在水平轴线的下方\n .call(g => g.select(\".domain\").remove()) // 删掉上一步所生成的坐标轴的轴线（它含有 domain 类名）\n .call(g => g.append(\"text\") // 为坐标轴添加额外信息名称（一般是刻度值的单位等信息）\n .attr(\"x\", width - margin.right)\n .attr(\"y\", -4)\n .attr(\"fill\", \"#000\") // 设置文本样式\n .attr(\"font-weight\", \"bold\")\n .attr(\"text-anchor\", \"end\")\n .text(data.x)) // 设置文本内容","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":105,"value":"// 基于比例尺绘制纵坐标轴\nyAxis = g => g\n .attr(\"transform\", `translate(${margin.left},0)`)\n .call(d3.axisLeft(y))\n .call(g => g.select(\".domain\").remove())\n // 为坐标轴添加额外信息名称（一般是刻度值的单位等信息）\n // 这里直接复制了坐标轴的最后一个坐标刻度值，然后在水平方向上做了一些偏移，再修改文本内容\n // 其实有另一个实现方案，就是和横坐标轴类似，添加一个元素，不过除了设置水平方向的偏移，还有设置一点垂直方向的偏移，例如 .attr(\"y\", 10)\n .call(g => g.select(\".tick:last-of-type text\").clone() \n .attr(\"x\", 4)\n .attr(\"text-anchor\", \"start\")\n .attr(\"font-weight\", \"bold\")\n .text(data.y))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3,"value":"// read the csv file and import the data as an array (elements are objects)\n// refer to d3-dsv module: https://github.com/d3/d3-dsv\n// 以上使用 d3-dsv 模块 https://github.com/d3/d3-dsv 的方法 `d3.csvParse()` 来解析 csv 文件，构建出一个对象数组\n// 其中将各数据点的 Miles_per_Gallon 属性重命名为 x（在散点图中作为横坐标轴的值），Horsepower 属性重命名为 y（在散点图中作为纵坐标轴的值）\n// 然后通过 `Object.assign()` 方法来为该数组添加两个属性 `x` 和 `y` 作为横坐标轴和纵坐标轴的名称，当然原来该数组也有 `columns` 属性\ndata = Object.assign(d3.csvParse(await FileAttachment(\"cars-2.csv\").text(), ({Name: name, Miles_per_Gallon: x, Horsepower: y}) => ({name, x: +x, y: +y})), {x: \"Miles per Gallon\", y: \"Horsepower\"})\n//以下列出数组的一些「额外属性」，之后会用到","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":231,"value":"data.x","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":232,"value":"data.y","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":236,"value":"data.columns","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W31","stdlib":"1"}} 2f:"$2e:body"