2e:null 2f:["$","title",null,{"children":"d3-drag and d3-zoom: 'x' and 'y' fields? | Sylvain Lesage | Observable"}] 34:T498,fixed = { // View state const data = [ { x: 10, y: 10 }, { x: 90, y: 10 }, { x: 100, y: 90 }, { x: 20, y: 90 } ]; const svg = d3 .create('svg') .attr("viewBox", [0, 0, width, width / 3]) .call( d3 .zoom() .scaleExtent([1 / 8, 8]) .on("zoom", () => { draw(d3.event.transform); }) ); const circle = svg .selectAll("circle") .data(data) .join("circle") .attr("transform", d => { return `translate(${d.x}, ${d.y})`; }) .attr("r", 20) .attr("fill", 'black') .call( d3 .drag() .subject(d => { const transform = d3.zoomTransform(svg.node()); const [x, y] = transform.apply([d.x, d.y]); return { x, y }; }) .on("drag", dragged) ); function draw(transform) { circle.attr("transform", d => { return `translate(${transform.apply([d.x, d.y])})`; }); } function dragged(d, i) { const transform = d3.zoomTransform(svg.node()); const [x, y] = transform.invert([d3.event.x, d3.event.y]); d.x = x; d.y = y; draw(transform); } return svg.node(); }35:[] 32:{"id":"cb6ecfc9cf89ae12","slug":"d3-drag-and-d3-zoom-x-and-y-fields","title":"d3-drag and d3-zoom: 'x' and 'y' fields?","thumbnail":"49e3b8e7b5c25c76853ac31b4ed41e895e2facb91573182f4e68e995d0ccb899","access_level":"public","create_time":"$D2020-02-05T21:07:06.653Z","update_time":"$D2020-02-06T09:01:26.135Z","view_time":null,"first_public_time":"$D2020-02-05T21:34:10.724Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"5c7b4ebed88da11a","login":"severo","name":"Sylvain Lesage","avatar_url":"https://avatars-next.observableusercontent.com/7713195c83e5bfd8090ffe70c871c23e743c711e9e712675c99a8960ca8c7944","tier":"starter_2024"},"version":91,"publish_version":91,"role":null,"authored":false,"authors":[{"type":"individual","id":"bf1872cca880d345","login":"severo","name":"Sylvain Lesage","avatar_url":"https://avatars-next.observableusercontent.com/7713195c83e5bfd8090ffe70c871c23e743c711e9e712675c99a8960ca8c7944","tier":null}],"members":[{"type":"individual","id":"bf1872cca880d345","login":"severo","name":"Sylvain Lesage","avatar_url":"https://avatars-next.observableusercontent.com/7713195c83e5bfd8090ffe70c871c23e743c711e9e712675c99a8960ca8c7944","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":{"id":"3fe6cf9032eacd78","slug":"d3-js","title":"D3.js","owner":{"id":"5c7b4ebed88da11a","login":"severo","name":"Sylvain Lesage"}},"type":"notebook","body":{"title":"d3-drag and d3-zoom: 'x' and 'y' fields?","cells":[{"id":0,"value":"md`# d3-drag and d3-zoom: 'x' and 'y' fields?\n\nThe only difference between the two cells is the name of the fields in

data (x and y in the first cell, xx and yy in the second one).\n\nWhere is the mysterious bug in my code? **Edit:** see \"Fixed\" section, thanks to [@mbostock and @fil](https://talk.observablehq.com/t/d3-drag-and-d3-zoom-mystery-bug/2811/3).\n\n### Broken\n\nTry to zoom in and out, and then to move a point. Drag is broken.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2,"value":"broken = {\n  // View state\n  const data = [\n    { x: 10, y: 10 },\n    { x: 90, y: 10 },\n    { x: 100, y: 90 },\n    { x: 20, y: 90 }\n  ];\n\n  const svg = d3\n    .create('svg')\n    .attr(\"viewBox\", [0, 0, width, width / 3])\n    .call(\n      d3\n        .zoom()\n        .scaleExtent([1 / 8, 8])\n        .on(\"zoom\", () => {\n          draw(d3.event.transform);\n        })\n    );\n  const circle = svg\n    .selectAll(\"circle\")\n    .data(data)\n    .join(\"circle\")\n    .attr(\"transform\", d => {\n      return `translate(${d.x}, ${d.y})`;\n    })\n    .attr(\"r\", 10)\n    .attr(\"fill\", 'black')\n    .call(d3.drag().on(\"drag\", dragged));\n\n  function draw(transform) {\n    circle.attr(\"transform\", d => {\n      return `translate(${transform.apply([d.x, d.y])})`;\n    });\n  }\n  function dragged(d, i) {\n    const transform = d3.zoomTransform(svg.node());\n    const [x, y] = transform.invert([d3.event.x, d3.event.y]);\n    d.x = x;\n    d.y = y;\n    draw(transform);\n  }\n\n  return svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":33,"value":"md`### Not broken\n\nTry to zoom in and out, and to drag the points. It works as expected.\n\n**Edit**: also slightly broken, see below.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":17,"value":"working_as_expected = {\n  // View state\n  const data = [\n    { xx: 10, yy: 10 },\n    { xx: 90, yy: 10 },\n    { xx: 100, yy: 90 },\n    { xx: 20, yy: 90 }\n  ];\n\n  const svg = d3\n    .create('svg')\n    .attr(\"viewBox\", [0, 0, width, width / 3])\n    .call(\n      d3\n        .zoom()\n        .scaleExtent([1 / 8, 8])\n        .on(\"zoom\", () => {\n          draw(d3.event.transform);\n        })\n    );\n  const circle = svg\n    .selectAll(\"circle\")\n    .data(data)\n    .join(\"circle\")\n    .attr(\"transform\", d => {\n      return `translate(${d.xx}, ${d.yy})`;\n    })\n    .attr(\"r\", 10)\n    .attr(\"fill\", 'black')\n    .call(d3.drag().on(\"drag\", dragged));\n\n  function draw(transform) {\n    circle.attr(\"transform\", d => {\n      return `translate(${transform.apply([d.xx, d.yy])})`;\n    });\n  }\n  function dragged(d, i) {\n    const transform = d3.zoomTransform(svg.node());\n    const [x, y] = transform.invert([d3.event.x, d3.event.y]);\n    d.xx = x;\n    d.yy = y;\n    draw(transform);\n  }\n\n  return svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":65,"value":"md`### Fixed\n\nThe broken example can be fixed replacing\n\n~~~javascript\n    .call(d3.drag().on(\"drag\", dragged))\n~~~\n\nby\n\n~~~javascript\n    .call(d3.drag().subject(d => {\n      const transform = d3.zoomTransform(svg.node());\n      const [x, y] = transform.apply([d.x, d.y]);\n      return {x,y}\n    }).on(\"drag\", dragged));\n~~~\n\nThe \"subject\" of the dragged circle (ie. its pair of coordinates x and y) was set from the circle datum. But this datum is expressed in \"unprojected\" coordinates, while the drag behavior expects pixel coordinates of the zoomed view.\n\nNote: this also fixes a bug in the \"Not broken\" cell (sic). Instead of setting the \"subject\" to the mouse coordinates, which made the circle \"jump\" to the pointer, it's now properly set to the center of the circle, by applying the zoom transform to the datum.\n\nThanks [@fil](https://observablehq.com/@fil) and [@mbostock](https://observablehq.com/@mbostock) for the solution. See https://talk.observablehq.com/t/d3-drag-and-d3-zoom-mystery-bug/2811/3.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":68,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":53,"value":"md`Reference for the code: https://observablehq.com/@severo/drag-zoom-svg-rescaled`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3,"value":"d3 = require(\"d3\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W35","stdlib":"1","titling":"auto"}}
33:"$32:body"