3f:null 40:["$","title",null,{"children":"Pan and zoomable grid (full) | onepisya | Observable"}] 46:Ta91,chart = { // zoom 设置函数 const zoom = d3 .zoom() // d3.zoom // 创建新的缩放行为。返回的行为zoom既是一个对象又是一个函数，通常通过selection.call应用于选定的元素。 .scaleExtent([0.25, 4]) // 缩放的倍数范围。 .on("zoom", zoomed); // select 一个已有的 svg 标签设置 viewBox 属性 const svg = d3 .select("svg#pan-zoom-grid") .attr("viewBox", [0, 0, width, height]); // 选择两个 g 标签 const canvas = svg.select("g#canvas"); const gridContainer = svg.select("g#grid"); // zomm.transform 此函数通常不直接调用，而是通过selection .call或transition .call调用。例如，要将缩放变换立即重置为恒等变换： // zoomIdentity 恒等变换 svg.call(zoom).call(zoom.transform, d3.zoomIdentity); function zoomed({ transform }) { //rescaleX 是返回其 domain 已转换的连续 scale x的副本。这是通过首先在尺度的range上应用逆x变换(inverse_x_transform)，然后应用逆尺度(inverse_scale)来计算相应的域(domain)来实现的： // rescaleX 中比例x必须使用 d3.interpolateNumber；不要使用 (连续)continuous.rangeRound，因为这会降低 (连续)continuous.invert的准确性，并可能导致重新缩放的域不准确。此方法不修改输入比例(scale)x；因此， x表示未转换的比例，而返回的比例表示其转换后的视图。 const zx = transform.rescaleX(x).interpolate(d3.interpolateRound); // zoom.interpolate 如果指定了interpolate，则将缩放转换的插值工厂设置为指定的函数。如果不指定interpolate，则返回当前插值工厂，默认为d3.interpolateZoom以实现平滑缩放。要在两个视图之间应用直接插值，请尝试d3.interpolate代替，比如我们使用到的 d3.interpolateRound // d3.interpolateRound 返回两个数字a和b之间的插值器；插值器类似于interpolateNumber，除了它将结果值四舍五入到最接近的整数。 const zy = transform.rescaleY(y).interpolate(d3.interpolateRound); // 计算出来对应的 zx zy 以及获取对应的缩放因子 // 根据参数设置 grid 网格， gridContainer.call(grid, zx, zy, transform.k); canvas.attr("transform", transform); } return Object.assign(svg.node(), { // reset methods reset() { const identity = d3.zoomIdentity; identity.x = 200; identity.y = 200; // 改变了恒等变换的点，viewbox 宽高是 400 // 将那个点依然重置到画面的中心 svg.transition().duration(750).call(zoom.transform, identity); // 重置的时间长度为 750 毫秒 } }); }47:T5a2,// grid 网格 grid = (g, x, y, k) => g // 设置网格颜色 .attr("stroke", "currentColor") // 设置网格透明度 .attr("stroke-opacity", 0.1) .call((g) => g .selectAll(".x") .data(x.ticks(12 / k)) // 使用 join 做了 x.ticks(12/k) 个 line 出来 .join( // 虽然 y1 默认就是 0 ，我还是加上了，在语义上更加明显 (enter) => enter .append("line") .attr("class", "x") .attr("y2", height) .attr("y1", 0), // 仅仅 enter 的时候添加新的 line 元素即可。 // line 中 x1 y1 确认一个开始的点 // x2 y2 确认一个结束的点 (update) => update, (exit) => exit.remove() ) .attr("x1", (d) => 0.5 + x(d)) .attr("x2", (d) => 0.5 + x(d)) ) .call((g) => g .selectAll(".y") .data(y.ticks(12 / k)) .join( (enter) => enter // x1 永远是 0 ，默认其实就是 0 ，可以不用写的。为了更加明确，还是写上了。 .append("line") .attr("class", "y") .attr("x2", width) .attr("x1", 0), (update) => update, (exit) => exit.remove() ) .attr("y1", (d) => 0.5 + y(d)) .attr("y2", (d) => 0.5 + y(d)) )48:[] 44:{"id":"c44d7fbe246ca17e","slug":"pan-and-zoomable-grid-full","title":"Pan and zoomable grid (full)","thumbnail":"c6f85c93870e6c146e2a6cc19db07b728a084d3cebc082a70c2ea222ee981886","access_level":"public","create_time":"$D2022-08-20T15:45:21.242Z","update_time":"$D2022-09-21T07:48:57.671Z","view_time":null,"first_public_time":"$D2022-08-20T17:43:09.717Z","has_unpublished_edits":null,"fork":{"id":"d9cb74b8fef6046a","slug":"pan-and-zoomable-grid-full","title":"Pan and zoomable grid (full)","owner":{"id":"740268410a9b156b","login":"leonardfischer","name":"Leonard Fischer"}},"stars":2,"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":141,"publish_version":141,"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":"Pan and zoomable grid (full)","cells":[{"id":0,"value":"md`# Pan and zoomable grid (full)\n\nDisplay a grid that will pan and zoom, according to mouse or touch input. This version will display all grid-lines for all zoom states.\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2,"value":"viewof reset = html`