2c:null 2d:["$","title",null,{"children":"Playing with ZOOM PAN with SVG and Plots | ssk | Observable"}] 32:Te25,myplot = { var temp = reset; console.clear(); const zoom = d3.zoom().scaleExtent([0.5, 8]).on("zoom", zoomed); var theplot = Plot.plot({ width: width - 50, grid: true, clamp: true, // height: 500, marginBottom: 20, margingLeft: 20, x: { zero: true, nice: true, line: true, clamp: true }, y: { zero: true, nice: true, line: true, clamp: true }, marks: [ // Plot.frame({ clip: true }), Plot.ruleX([5, 10], { stroke: "blue", clip: true }), Plot.ruleY([5.5, 12], { stroke: "lightblue" }), Plot.line(d3.range(15), { x: (d) => d, y: (d) => Math.random() * d * 10, r: 10, stroke: "green", clip: true }), Plot.dot(d3.range(10), { x: (d) => d, y: (d) => Math.random() * d * 10, r: 2, fill: "blue", clip: true, aria: "dotplot" }), Plot.text(d3.range(5), { x: (d) => d, y: (d) => Math.random() * d * 10, text: (d) => d + " nonmoving !" }) ] }); var svg = d3.select(theplot).attr("width", width); // .on("click", reset); // const svg = d3.create("svg") var xAxisScale = theplot.scale("x"); var yAxisScale = theplot.scale("y"); // trying adding elements outside Plot api svg .append("g") .attr("aria-label", "custom") .append("circle") .attr("cx", xAxisScale.apply(10)) .attr("cy", yAxisScale.apply(6)) .attr("r", 10); // var xAxis = (g, x) => // g.attr("transform", `translate(0,${height})`).call(d3.axisTop(x)); var plotxaxis = svg.select("g[aria-label=x-axis]"); var plotyaxis = svg.select("g[aria-label=y-axis]"); // .call(d3.axisTop(oldx)); // var gX = svg.append("g").attr("class", "axis axis--x"); //.call(xAxis); // const gy = svg.append("g"); svg.call(zoom); var oldx = d3.scaleLinear().domain(xAxisScale.domain).range(xAxisScale.range); var oldy = d3.scaleLinear().domain(yAxisScale.domain).range(yAxisScale.range); var arr = theplot.children; function zoomed({ transform }) { // const zx = transform.rescaleX(x).interpolate(d3.interpolateRound); // const zy = transform.rescaleY(y).interpolate(d3.interpolateRound); // function zoomFunction(){ // create new scale ojects based on event var new_xScale = transform.rescaleX(oldx); var new_yScale = transform.rescaleY(oldy); plotxaxis.call(d3.axisBottom(new_xScale)); // .call((g) => g.select(".domain").remove()); plotyaxis.call(d3.axisLeft(new_yScale)); // .call((g) => g.select(".domain").remove()); var xresult = []; for (var x = 0; x < 9; x++) { var arialabel = d3.select(arr.item(x)).attr("aria-label"); xresult[x] = arialabel; if (arialabel != null && !arialabel.includes("axis")) { d3.select(arr.item(x)).attr("transform", transform); } console.log("result[%d] =", x, xresult[x]); } // update circle // var allg = svg.selectAll("g").each((g) => { // g.attr("transform", transform); // var label = g.attr("aria-label"); // console.log("aria", label); // }); // svg.selectAll("g[aria-label=dot]").attr("transform", transform); // svg.selectAll("g[aria-label=line]").attr("transform", transform); // svg.selectAll("g[aria-label=custom]").attr("transform", transform); } // return html`

Hello ${svg.node()}

`; // return Object.assign(svg.node(), { // reset() { // svg.transition().duration(150).attr("width", 500).call(d3.zoomIdentity); // } // }); return theplot; }33:[] 30:{"id":"8551376e65f5ecdd","slug":"playing-with-zoom-pan-with-svg-and-plots","title":"Playing with ZOOM PAN with SVG and Plots","thumbnail":"d19bf1563b50bcbb0b3b4ceb2444d989caf025c569ef0c59b91d15465af51b1f","access_level":"public","create_time":"$D2022-03-30T02:42:17.841Z","update_time":"$D2022-03-30T05:40:37.475Z","view_time":null,"first_public_time":"$D2022-03-30T02:56:24.595Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"c5c8bb481057d79a","login":"wiless","name":"ssk","avatar_url":"https://avatars-next.observableusercontent.com/d2936e180fcd9258dc3aa1546b75b13da53e67e467542df478e95db717f651bb","tier":"starter_2024","bio":"Into telecom, standardization, R&D, spectrum, 3gpp, 5G, and obsessive for programming"},"version":112,"publish_version":112,"role":null,"authored":false,"authors":[{"type":"individual","id":"aa2d7f995bcac634","login":"wiless","name":"ssk","avatar_url":"https://avatars-next.observableusercontent.com/d2936e180fcd9258dc3aa1546b75b13da53e67e467542df478e95db717f651bb","tier":null,"bio":"Into telecom, standardization, R&D, spectrum, 3gpp, 5G, and obsessive for programming"}],"members":[{"type":"individual","id":"aa2d7f995bcac634","login":"wiless","name":"ssk","avatar_url":"https://avatars-next.observableusercontent.com/d2936e180fcd9258dc3aa1546b75b13da53e67e467542df478e95db717f651bb","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Playing with ZOOM PAN with SVG and Plots","cells":[{"id":0,"value":"# Playing with ZOOM PAN with SVG and Plots","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":6,"value":"{\n // Learning to change attribs\n var mysvg = svg``;\n\n d3.select(mysvg)\n .selectAll(\"circle\")\n .style(\"fill\", \"orange\")\n .attr(\"r\", function () {\n return 10 + Math.random() * 40;\n });\n return mysvg;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":18,"value":"# Playing with SVG elements created by Observable Plot","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":64,"value":"arr = myplot.children","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":67,"value":"{\n var result = [];\n for (var x = 0; x < 9; x++) {\n result[x] = d3.select(arr.item(x)).attr(\"aria-label\");\n }\n return result;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":26,"value":"viewof reset = Inputs.button(\"reset\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":23,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W33","stdlib":"1"}} 31:"$30:body"