2d:null 2e:["$","title",null,{"children":"getPointAtLength browser bug | John Muyskens | Observable"}] 33:[] 31:{"id":"28add4c715dedb34","slug":"getpointatlength-browser-bug","title":"getPointAtLength browser bug","thumbnail":"1a27da3fe22e66a87ac4c51003b49be05ebe5c35632627ebef4c98c154c151cb","access_level":"public","create_time":"$D2018-04-17T21:19:58.734Z","update_time":"$D2018-04-18T12:53:56.124Z","view_time":null,"first_public_time":"$D2018-04-17T21:27:16.710Z","has_unpublished_edits":null,"fork":{"id":"5622ecc7bc76410d","slug":"untitled","title":"","owner":{"id":"005b77629f9df560","login":"jmuyskens","name":"John Muyskens"}},"stars":0,"starred":false,"owner":{"type":"team","id":"005b77629f9df560","login":"jmuyskens","name":"John Muyskens","avatar_url":"https://avatars-next.observableusercontent.com/3c35c79dc6869747f90be0c3a417c733a9ca65b6fc81825b82cacecb7f64fd50","tier":"starter_2024"},"version":158,"publish_version":158,"role":null,"authored":false,"authors":[{"type":"individual","id":"719376c8720885af","login":"jmuyskens","name":"John Muyskens","avatar_url":"https://avatars-next.observableusercontent.com/3c35c79dc6869747f90be0c3a417c733a9ca65b6fc81825b82cacecb7f64fd50","tier":null}],"members":[{"type":"individual","id":"719376c8720885af","login":"jmuyskens","name":"John Muyskens","avatar_url":"https://avatars-next.observableusercontent.com/3c35c79dc6869747f90be0c3a417c733a9ca65b6fc81825b82cacecb7f64fd50","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"title":"getPointAtLength browser bug","cells":[{"id":0,"value":"md`# getPointAtLength browser bug`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":132,"value":"md`The point does not appear to follow the path in Chrome Version 65.0.3325.181 (Official Build) (64-bit) on macOS Sierra (version 10.12.6). It works as expected in Safari Version 11.1 (12605.1.33.1.3) and Firefox 59.0.2 (64-bit) on the same platform.\n\nFiddle with the pathLengthPercent (currently at ${Math.round(pathLengthPercent * 100)}%) to see dots follow the path (or not).\n\nThe red dot is the browser's native getPointAtLength function, while the blue dot is from the [svg-path-properties library](https://github.com/rveciana/svg-path-properties).`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2,"value":"html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":110,"value":"viewof pathLengthPercent = DOM.range(0, 1)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":58,"value":"viewof r = DOM.range(0, 1000, 1)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":142,"value":"pathD = `M${x1},${y1} A ${r},${r} 0 1 0 ${x2},${y2}`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":120,"value":"pathLengthPercent","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":114,"value":"pointOnPath = {\n let path = d3.select('path').node()\n try {\n let totalLength = path.getTotalLength();\n return path.getPointAtLength(path.getTotalLength() * pathLengthPercent);\n } catch(e) {\n return {x: 0, y: 0}\n }\n \n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":139,"value":"jsPointOnPath = {\n let path = svgPathProperties.svgPathProperties(pathD)\n try {\n let totalLength = path.getTotalLength();\n return path.getPointAtLength(path.getTotalLength() * pathLengthPercent);\n } catch(e) {\n return {x: 0, y: 0}\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":66,"value":"r","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":23,"value":"x1 = width / 2","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":30,"value":"x2 = width * 0.75","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":32,"value":"y1 = 50","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":34,"value":"y2 = width * 0.15","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":116,"value":"d3 = require(\"https://d3js.org/d3.v5.min.js\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":135,"value":"svgPathProperties = require('svg-path-properties')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W33","stdlib":"1","titling":"auto"}} 32:"$31:body"