25:["$","title",null,{"children":"SVG Paths with Circular Corners | Benoit Kuhn | Observable"}] 49:T53e,md`# SVG Paths with Circular Corners TLDR: Jump straight to the d3 curve function on [npm](https://www.npmjs.com/package/d3-curve-circlecorners) or [GitHub](https://github.com/carpiediem/d3-curve-circlecorners) [This gist](https://bl.ocks.org/1wheel/ac027026e8e73bab7b65cfe17e257140) shows a method for replacing the intersections of straight lines with [Bézier curves](https://en.wikipedia.org/wiki/B%C3%A9zier_curve), but diagrams often look better with [circular arcs](https://en.wikipedia.org/wiki/Arc_(geometry%29), instead. For instance, most transit diagrams curve routes along circular arcs [in a consistent way](https://www.cambooth.net/tutorial-round-corners-illustrator/). [![Harry Beck's 1933 map of the London Underground](https://metropolitantojubilee.files.wordpress.com/2013/11/1931-book-london-underground-maps-presentation-drawing-for-the-diagrammatic-tube-map-harry-beck.jpg?h=300)](https://metropolitantojubilee.wordpress.com/map-graphical-approach/) These designs connect a segment of a circle to two straight lines. The lines both intersect the circle at [tangent points](https://en.wikipedia.org/wiki/Tangent). Here's a simple example of a single corner- feel free to drag the points or alter the corner radius. ` 4a:T17de, chart = { const svg = d3.create("svg") .attr("viewBox", [0, 0, width, 300]) .attr("stroke-width", 4); //const middleP1 = {x: ((points[2].x-points[0].x)/2), y: points[0].y}; const middleP1 = {x: points[0].x + ((points[3].x - points[0].x)/2), y: points[0].y}; const middleP2 = {x: points[0].x + ((points[3].x-points[0].x)/2), y: points[3].y}; points[1] = middleP1; points[2] = middleP2; const angle = Math.PI / 2; /////////// // const angle = Math.atan2(points[1].y-points[0].y, points[1].x-points[0].x) // - Math.atan2(points[1].y-points[2].y, points[1].x-points[2].x); // const acuteAngle = Math.min(Math.abs(angle), 2*Math.PI-Math.abs(angle)); // const shortestRay = Math.min( // Math.sqrt(Math.pow(points[1].x-points[0].x, 2) + Math.pow(points[1].y-points[0].y, 2)), // Math.sqrt(Math.pow(points[1].x-points[2].x, 2) + Math.pow(points[1].y-points[2].y, 2)) // ); // const radiusToUse = Math.min( cornerRadius, shortestRay * Math.tan(acuteAngle/2) ); // const distanceToTangentPoint = Math.abs(radiusToUse / Math.tan(acuteAngle/2)); // const determinant = (points[1].x-points[0].x)*(points[1].y-points[2].y) - (points[1].x-points[2].x)*(points[1].y-points[0].y); // const sweepFlag = determinant < 0 ? 1 : 0; /////////// const determinant1 = (points[1].x-points[0].x)*(points[1].y-points[2].y) - (points[1].x-points[2].x)*(points[1].y-points[0].y); const sweepFlag1 = determinant1 < 0 ? 1 : 0; const shortestRay1 = Math.min( Math.sqrt(Math.pow(points[1].x-points[0].x, 2) + Math.pow(points[1].y-points[0].y, 2)), Math.sqrt(Math.pow(points[1].x-points[2].x, 2) + Math.pow(points[1].y-points[2].y, 2)) ); const radiusToUse1 = Math.min( cornerRadius, shortestRay1 * Math.tan(angle/2) ); const distanceToTangentPoint1 = Math.abs(radiusToUse1 / Math.tan(angle/2)); const anchorIn1 = alongSegment(points[1], points[0], distanceToTangentPoint1); const anchorOut1 = alongSegment(points[1], points[2], distanceToTangentPoint1); const determinant2 = (points[2].x-points[1].x)*(points[2].y-points[3].y) - (points[2].x-points[3].x)*(points[2].y-points[1].y); const sweepFlag2 = determinant2 < 0 ? 1 : 0; const shortestRay2 = Math.min( Math.sqrt(Math.pow(points[2].x-points[1].x, 2) + Math.pow(points[2].y-points[1].y, 2)), Math.sqrt(Math.pow(points[2].x-points[3].x, 2) + Math.pow(points[2].y-points[3].y, 2)) ); const radiusToUse2 = Math.min( cornerRadius, shortestRay2 * Math.tan(angle/2) ); const distanceToTangentPoint2 = Math.abs(radiusToUse2 / Math.tan(angle/2)); const anchorIn2 = alongSegment(points[2], points[1], distanceToTangentPoint2); const anchorOut2 = alongSegment(points[2], points[3], distanceToTangentPoint2); // const circleCenter = alongSegment( // points[1], // { x: (anchorIn1.x + anchorOut1.x)/2, y: (anchorIn1.y + anchorOut1.y)/2 }, // Math.sqrt(Math.pow(radiusToUse, 2) + Math.pow(distanceToTangentPoint, 2)) // ); const manualPathDesc = ` M${points[0].x} ${points[0].y} L${anchorIn1.x} ${anchorIn1.y} A${radiusToUse1} ${radiusToUse1} 0 0 ${sweepFlag1} ${anchorOut1.x} ${anchorOut1.y} L${anchorIn2.x} ${anchorIn2.y} A${radiusToUse2} ${radiusToUse2} 0 0 ${sweepFlag2} ${anchorOut2.x} ${anchorOut2.y} L${points[3].x} ${points[3].y} `; svg.append('rect') .attr("x", 8) .attr("y", 10) .attr("width", 160) .attr("height", 105) .attr("fill", '#eee'); svg.append('text') .attr("class", 'angle') .attr("x", 35) .attr("y", 25) .attr("text-anchor", "end") .text(`${shortestRay2}`); svg.append('text') .attr("class", 'toAnchor') .attr("x", 35) .attr("y", 85) .attr("text-anchor", "end") .text(Math.round(distanceToTangentPoint)); svg.append('text') .attr("class", 'determinate') .attr("x", 35) .attr("y", 105) .attr("text-anchor", "end") .text(determinant < 0 ? 'neg.' : 'pos.'); svg.append('text') .attr("x", 40) .attr("y", 25) .attr("text-anchor", "start") .text('angle between rays'); svg.append('text') .attr("x", 40) .attr("y", 45) .attr("text-anchor", "start") .text('length of shortest ray'); svg.append('text') .attr("x", 40) .attr("y", 65) .attr("text-anchor", "start") .text('max radius, to fit'); svg.append('text') .attr("x", 40) .attr("y", 85) .attr("text-anchor", "start") .text('from vertex to anchors'); svg.append('text') .attr("x", 40) .attr("y", 105) .attr("text-anchor", "start") .text('determinant value'); svg.append('path') .attr("class", 'arced') .datum(points) .attr("d", manualPathDesc) .attr("stroke", 'orange') .attr("stroke-width", 5) .attr("fill", 'none'); // svg.append('path') // .attr("class", 'angled') // .attr("d", 'M' + points.map(d => `${d.x} ${d.y}`).join(', ')) // .attr("stroke", '#888') // .attr("fill", 'none'); // svg.append('rect') // .attr("class", 'anchor in') // .attr("x", anchorIn1.x - 3) // .attr("y", anchorIn1.y - 3) // .attr("width", 6) // .attr("height", 6) // .attr("fill", '#888'); // svg.append('rect') // .attr("class", 'anchor out') // .attr("x", anchorOut1.x - 3) // .attr("y", anchorOut1.y - 3) // .attr("width", 6) // .attr("height", 6) // .attr("fill", '#ccc'); // svg.append('rect') // .attr("class", 'anchor in') // .attr("x", anchorIn2.x - 3) // .attr("y", anchorIn2.y - 3) // .attr("width", 6) // .attr("height", 6) // .attr("fill", '#888'); // svg.append('rect') // .attr("class", 'anchor out') // .attr("x", anchorOut2.x - 3) // .attr("y", anchorOut2.y - 3) // .attr("width", 6) // .attr("height", 6) // .attr("fill", '#ccc'); svg.selectAll("circle") .data([points[0], points[3]]) .join("circle") .attr("cx", d => d.x) .attr("cy", d => d.y) .attr("r", 10) .attr("fill", (d, i) => d3.schemeTableau10[i]) .call(drag); return svg.node(); }4b:T448,biggerChart = { const openPathPoints = [ { x: 50, y: 50 }, { x: 200, y: 50 }, { x: 100, y: 100 }, { x: 100, y: 250 }, { x: 400, y: 100 } ]; const linearDraw = d3.line() .x(d => d.x) .y(d => d.y) .curve(d3.curveLinear); const circleCornersLine = d3.line() .x(d => d.x) .y(d => d.y) .curve(curveCircleCorners.radius(cornerRadius)); const svg = d3.create("svg") .attr("viewBox", [0, 0, width, 300]) .attr("stroke-width", 2); svg.append('path') .attr("class", 'arced function') .datum(openPathPoints) .attr("d", circleCornersLine) .attr("stroke", 'yellow') .attr("stroke-width", 5) .attr("fill", 'none'); svg.append('path') .attr("class", 'angled function') .datum(openPathPoints) .attr("d", linearDraw) .attr("stroke", '#ccc') .attr("fill", 'none'); svg.selectAll("circle") .data(openPathPoints) .join("circle") .attr("cx", d => d.x) .attr("cy", d => d.y) .attr("r", 8) .attr("fill", '#888') .call(drag); return svg.node(); }4c:T14ce,curveCircleCorners = { /** * Point type definition * @typedef {Object} Point * @property {number} x - horizontal position in a canvas or SVG element * @property {number} y - vertical position in a canvas or SVG element */ /** * CircleCorners type definition * @typedef {Object} CircleCorners * @property {function} areaStart - triggered when ... * @property {function} areaEnd - triggered when ... * @property {function} lineStart - triggered when before the first datum in a line * @property {function} lineEnd - triggered when after the last datum in a line * @property {function} point - triggered for each point in an array of data defining a line * @property {object} _context - 2d context of an HTML canvas element (or equivalant SVG drawing space) * @property {string} _context._ draw commands to be applied to the d attribute of a path element * @property {number} _radius - corner radius to apply to each line segment intersection * @property {number} [_line] - state variable for ... * @property {number} [_point] - state variable for how many points are saved as properties (vert & prev) * @property {Point} [_prev] - the point preceding the vertex; either the first point of a line or an "out" anchor * @property {Point} [_vert] - vertex currently being drawn; the curve will not actually touch this point */ function CircleCorners(context, radius) { this._context = context; this._radius = radius; } /** * @func alongSegment * @desc locatates a point a certain disatance away, in the direction of a known position * @param {Point} from - origin of a ray (or vector) * @param {Point} from - second point defining the direction of the ray (or vector) * @param {number} distanceAlong - distance away that the output point should be, along the ray * @return {Point} a new point, the specified direction and distance from `from` */ function alongSegment(from, toward, distanceAlong) { const rayAngle = Math.atan2(from.y - toward.y, from.x - toward.x); return { x: from.x - distanceAlong * Math.cos(rayAngle), y: from.y - distanceAlong * Math.sin(rayAngle) }; } /** * @func arcPast * @desc ... * @param {Object} that - context of the current draw command * @param {number} x - ... * @param {number} y - ... */ function arcPast(that, x, y) { // TO DO: Allow that._radius to be a number or an array of numbers (one for each point, with first and last ignored) const angle = Math.abs( Math.atan2(that._vert.y - that._prev.y, that._vert.x - that._prev.x) - Math.atan2(that._vert.y - y, that._vert.x - x) ); const acuteAngle = angle > Math.PI ? 2*Math.PI - angle : angle; const shortestRay = Math.min( Math.sqrt(Math.pow(that._vert.x - that._prev.x, 2) + Math.pow(that._vert.y - that._prev.y, 2)), Math.sqrt(Math.pow(that._vert.x - x , 2) + Math.pow(that._vert.y - y , 2)) ); const radius = Math.min( that._radius, shortestRay * Math.tan(acuteAngle/2) ); const anchorDistance = Math.abs(radius / Math.tan(acuteAngle/2)); const determinant = (that._vert.x - that._prev.x)*(that._vert.y - y) - (that._vert.x - x )*(that._vert.y - that._prev.y); const sweepFlag = determinant < 0 ? 1 : 0; const aIn = alongSegment(that._vert, that._prev, anchorDistance); const aOut = alongSegment(that._vert, {x, y}, anchorDistance); // that._context.arcTo() doesn't work properly, so we'll modify the string directly that._context._ += ` L${aIn.x} ${aIn.y} A${radius} ${radius} 0 0 ${sweepFlag} ${aOut.x} ${aOut.y}`; that._prev = aOut; that._vert = { x, y }; } CircleCorners.prototype = { areaStart: function() { this._line = 0; }, areaEnd: function() { this._line = NaN; }, lineStart: function() { this._prev = { x: NaN, y: NaN }; this._vert = { x: NaN, y: NaN }; this._point = 0; }, lineEnd: function() { // No more points, so draw a straight line to the end this._context.lineTo(this._vert.x, this._vert.y); // proceed if (this._line || (this._line !== 0 && this._point === 3)) this._context.closePath(); this._line = 1 - this._line; }, point: function(x, y) { x = +x, y = +y; switch (this._point) { case 0: this._point = 1; break; case 1: this._point = 2; if (this._line) { this._context.lineTo(this._vert.x, this._vert.y); } else { this._context.moveTo(this._vert.x, this._vert.y); } break; default: arcPast(this, x, y); return; } this._prev = this._vert; this._vert = { x, y }; } }; return (function custom(radius) { function circleCorners(context) { return new CircleCorners(context, radius); } circleCorners.radius = function(radius) { return custom(+radius); }; return circleCorners; })(0); }4d:T1287,drag = { function dragstarted(d) { d3.select(this).raise().attr("stroke", "black"); } function dragged(d) { d3.select(this).attr("cx", d.x = d3.event.x).attr("cy", d.y = d3.event.y); d3.select('path.angled').attr('d', 'M' + points.map(d => `${d.x} ${d.y}`).join(', ')); const middleP1 = {x: points[0].x + ((points[3].x - points[0].x)/2), y: points[0].y}; const middleP2 = {x: points[0].x + ((points[3].x-points[0].x)/2), y: points[3].y}; points[1] = middleP1; points[2] = middleP2; const angle = Math.PI / 2; /////////// // const angle = Math.atan2(points[1].y-points[0].y, points[1].x-points[0].x) // - Math.atan2(points[1].y-points[2].y, points[1].x-points[2].x); // const acuteAngle = Math.min(Math.abs(angle), 2*Math.PI-Math.abs(angle)); // const shortestRay = Math.min( // Math.sqrt(Math.pow(points[1].x-points[0].x, 2) + Math.pow(points[1].y-points[0].y, 2)), // Math.sqrt(Math.pow(points[1].x-points[2].x, 2) + Math.pow(points[1].y-points[2].y, 2)) // ); // const radiusToUse = Math.min( cornerRadius, shortestRay * Math.tan(acuteAngle/2) ); // const distanceToTangentPoint = Math.abs(radiusToUse / Math.tan(acuteAngle/2)); // const determinant = (points[1].x-points[0].x)*(points[1].y-points[2].y) - (points[1].x-points[2].x)*(points[1].y-points[0].y); // const sweepFlag = determinant < 0 ? 1 : 0; /////////// const determinant1 = (points[1].x-points[0].x)*(points[1].y-points[2].y) - (points[1].x-points[2].x)*(points[1].y-points[0].y); const sweepFlag1 = determinant1 < 0 ? 1 : 0; const shortestRay1 = Math.min( Math.sqrt(Math.pow(points[1].x-points[0].x, 2) + Math.pow(points[1].y-points[0].y, 2)), Math.sqrt(Math.pow(points[1].x-points[2].x, 2) + Math.pow(points[1].y-points[2].y, 2)) ); const radiusToUse1 = Math.min( cornerRadius, shortestRay1 * Math.tan(angle/2) ); const distanceToTangentPoint1 = Math.abs(radiusToUse1 / Math.tan(angle/2)); const anchorIn1 = alongSegment(points[1], points[0], distanceToTangentPoint1); const anchorOut1 = alongSegment(points[1], points[2], distanceToTangentPoint1); const determinant2 = (points[2].x-points[1].x)*(points[2].y-points[3].y) - (points[2].x-points[3].x)*(points[2].y-points[1].y); const sweepFlag2 = determinant2 < 0 ? 1 : 0; const shortestRay2 = Math.min( Math.sqrt(Math.pow(points[2].x-points[1].x, 2) + Math.pow(points[2].y-points[1].y, 2)), Math.sqrt(Math.pow(points[2].x-points[3].x, 2) + Math.pow(points[2].y-points[3].y, 2)) ); const radiusToUse2 = Math.min( cornerRadius, shortestRay2 * Math.tan(angle/2) ); const distanceToTangentPoint2 = Math.abs(radiusToUse2 / Math.tan(angle/2)); const anchorIn2 = alongSegment(points[2], points[1], distanceToTangentPoint2); const anchorOut2 = alongSegment(points[2], points[3], distanceToTangentPoint2); const circleCenter = alongSegment( points[1], { x: (anchorIn1.x + anchorOut1.x)/2, y: (anchorIn1.y + anchorOut1.y)/2 }, Math.sqrt(Math.pow(radiusToUse, 2) + Math.pow(distanceToTangentPoint, 2)) ); const manualPathDesc = ` M${points[0].x} ${points[0].y} L${anchorIn1.x} ${anchorIn1.y} A${radiusToUse1} ${radiusToUse1} 0 0 ${sweepFlag1} ${anchorOut1.x} ${anchorOut1.y} L${anchorIn2.x} ${anchorIn2.y} A${radiusToUse2} ${radiusToUse2} 0 0 ${sweepFlag2} ${anchorOut2.x} ${anchorOut2.y} L${points[3].x} ${points[3].y} `; d3.select('path.arced').attr('d', manualPathDesc); // d3.select('rect.anchor.in') // .attr("x", anchorIn.x - 3) // .attr("y", anchorIn.y - 3); // d3.select('rect.anchor.out') // .attr("x", anchorOut.x - 3) // .attr("y", anchorOut.y - 3); // const circleCenter = alongSegment( // points[1], // { x: (anchorIn.x + anchorOut.x)/2, y: (anchorIn.y + anchorOut.y)/2 }, // Math.sqrt(Math.pow(radiusToUse, 2) + Math.pow(distanceToTangentPoint, 2)) // ); // d3.select('path.triangles') // .attr("d", `M${points[1].x} ${points[1].y} L${circleCenter.x} ${circleCenter.y} L${anchorIn.x} ${anchorIn.y} L${circleCenter.x} ${circleCenter.y} L${anchorOut.x} ${anchorOut.y}`); // d3.select('text.angle').text(`${Math.round(acuteAngle * 180 / Math.PI)}°`); // d3.select('text.shortest').text(Math.round(shortestRay)); // d3.select('text.maxradius').text(Math.round(shortestRay * Math.tan(acuteAngle/2))); d3.select('text.toAnchor').text(Math.round(distanceToTangentPoint)); d3.select('text.determinate').text(determinant < 0 ? 'neg.' : 'pos.'); } function dragended(d) { d3.select(this).attr("stroke", null); } return d3.drag() .on("start", dragstarted) .on("drag", dragged) .on("end", dragended); }4e:[] 29:{"id":"ec8fac627c13a1de","slug":null,"title":"SVG Paths with Circular Corners","thumbnail":"1cf2904564a503291a83d26cac990eb2be8b5e2d2b8821d7c0b5c92e7c4161df","access_level":"public","create_time":"$D2023-02-06T16:44:02.446Z","update_time":"$D2023-02-15T14:19:24.736Z","view_time":null,"first_public_time":"$D2023-02-06T16:44:02.446Z","has_unpublished_edits":null,"fork":{"id":"28f1d417a5c78063","slug":"svg-paths-with-circular-corners","title":"SVG Paths with Circular Corners","owner":{"id":"2dcf635f2ad2abcd","login":"carpiediem","name":"Ryan Carpenter"}},"stars":0,"starred":false,"owner":{"type":"team","id":"07c3fd57581ed805","login":"benoit-ku-pro","name":"Benoit Kuhn","avatar_url":"https://avatars-next.observableusercontent.com/a1b77fe315418ac9bee575ef70138bc76c62f6ab65825fed17ffa1ba857a32b7","tier":"starter_2024","bio":"","followed_by_you":false,"follows_you":false},"version":669,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"d53d4fbbca570d5d","login":"benoit-ku-pro","name":"Benoit Kuhn","avatar_url":"https://avatars-next.observableusercontent.com/a1b77fe315418ac9bee575ef70138bc76c62f6ab65825fed17ffa1ba857a32b7","tier":null,"bio":"","followed_by_you":false,"follows_you":false}],"members":[{"type":"individual","id":"d53d4fbbca570d5d","login":"benoit-ku-pro","name":"Benoit Kuhn","avatar_url":"https://avatars-next.observableusercontent.com/a1b77fe315418ac9bee575ef70138bc76c62f6ab65825fed17ffa1ba857a32b7","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"SVG Paths with Circular Corners","cells":[{"id":0,"value":"$49","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":62,"value":"viewof cornerRadius = slider({\n min: 0, \n max: 100, \n step: 1, \n value: 20, \n title: \"Corner Radius\",\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"$4a","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":599,"value":"points","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":163,"value":"md`Although one would typically define a circle by its center point and radius, in [SVG](https://developer.mozilla.org/en-US/docs/Web/SVG), [HTML canvases](https://www.w3schools.com/tags/canvas_arcto.asp), and [d3.js](https://github.com/d3/d3-path#path_arcTo) circular arcs (and all eliptical arcs) are defined by two point on the edge of the circle and its radius; the center point is never specified. So, to draw these corners, we need to be able to calculate exactly where those tangent points are for any given pair of intersecting straight lines (or rays). Let's call them \"anchor points.\"\n\nThe light grey triangles, in the drawing above, are key for this. If you look closely at the symetrical triangles, one of their angles is 90° and another is half the angle between the rays (i.e. θ/2). With a little trigonometry, we know that the ratio of corner radius to anchor point distance can be calculated with the tanget function.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":309,"value":"tex`\\tan(\\frac{\\theta}{2}) = \\frac{r_{corner}}{d_{anchor}}`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":316,"value":"md`For each ray, we can use the direction of that ray (φ) and the how far away the anchor should be from the vertex to calculate coordiantes.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":317,"value":"tex`\\phi_{ray} = \\arctan(\\frac{y_{vertex}-y_{ray}}{x_{vertex}-x_{ray}})`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":333,"value":"tex`position_{anchor} = \\{ x_{vertex} + d_{anchor}\\cos(\\phi_{ray}), y_{vertex} + d_{anchor}\\sin(\\phi_{ray})\\}`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":339,"value":"md`For simplicity, I've isolated the logic to find a point along a line into the alongSegment() function.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":75,"value":"function alongSegment(from, toward, distanceAlong) {\n const bearing = Math.atan2(from.y-toward.y, from.x-toward.x);\n \n return {\n bearing,\n x: from.x - distanceAlong * Math.cos(bearing),\n y: from.y - distanceAlong * Math.sin(bearing)\n };\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":343,"value":"md`Two anchor points and a radius aren't quite enough to define the arc, though. As the image below shows, there are four ways draw a cicular arc between two points. We'll always want the smaller arc option, but the sweep direction depends on if the rays represent [a \"right\" turn or a \"left\" turn](http://www.cs.tufts.edu/comp/163/OrientationTests.pdf).\n\n![SVG drawArc flag options](https://i.stack.imgur.com/nrbmw.png)\n\nThe trick here gets into linear algebra, but the actual calculation is pretty easy. The sweep flag should be on if the [determinant](https://en.wikipedia.org/wiki/Determinant) of the two rays is negative (a \"right\" turn) and off if it is positive (a \"left\" turn).`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":346,"value":"tex`\\begin{vmatrix} x_{blue to orange} & x_{orange to red} \\\\ x_{orange to red} & y_{orange to red} \\end{vmatrix} = x_{blue to orange}y_{orange to red} - x_{orange to red}x_{orange to red} > 0?`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":355,"value":"md`Having solved for the value of the sweep flag, we can define a \"draw\" command to [pass to](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/d) an SVG path element.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":359,"value":"d = {\n const sweepFlag = determinant < 0 ? 1 : 0;\n const anchorIn = alongSegment(points[1], points[0], distanceToTangentPoint);\n const anchorOut = alongSegment(points[1], points[2], distanceToTangentPoint);\n\n return `\n M${points[0].x} ${points[0].y}\n L${anchorIn.x} ${anchorIn.y}\n A${radiusToUse} ${radiusToUse} 0 0 ${sweepFlag} ${anchorOut.x} ${anchorOut.y}\n L${points[2].x} ${points[2].y}\n`;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":166,"value":"md`To make this useful, it needs to be able to handle more than three points. So, we turn to the [d3 curve() function](https://github.com/d3/d3-shape#curves). This applies an algorithm to a [line](https://github.com/d3/d3-shape#lines) or [area](https://github.com/d3/d3-shape#areas) function to help it convert an array of x and y values to a smooth path. The d3.js library includes [about a dozen options](http://bl.ocks.org/d3indepth/b6d4845973089bc1012dec1674d3aff8), built-in. But we can also apply a custom curve function in the same way:\n

d3.line().curve(curveCircleCorners.radius(20));

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":168,"value":"$4b","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":136,"value":"$4c","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":378,"value":"md`If you are using d3 in a project and think these rounded corners would be useful, the function is availible for use on [npm](https://www.npmjs.com/package/d3-curve-circlecorners). If you find any issues or would like to add a pull request, please let me know on [GitHub](https://github.com/carpiediem/d3-curve-circlecorners).\n\n## Work to do\n\nOne edge case that doesn't look very nice is when multiple consecutive line segments are shorter than the desired corner radius. This results in a sharp corner at one of the points, when the arcs on either size are maximized. Move the radius slider (at the top of the page) all the way to 100 and look at the second chart, for an example.\n\nReally, this should prompt the designer to change the radius or the layout, but there might be a better way to handle the situation within the curve function.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":69,"value":"import {slider} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":90,"value":"import {table} from \"@tmcw/tables@513\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"d3 = require(\"d3@5\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":72,"value":" points = d3.range(4).map(i => ({\n x: Math.random() * (width - 10 * 2) + 10,\n y: Math.random() * (300 - 10 * 2) + 10,\n }));","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":395,"value":"angle = Math.atan2(points[1].y-points[0].y, points[1].x-points[0].x)\n - Math.atan2(points[1].y-points[2].y, points[1].x-points[2].x);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":397,"value":"acuteAngle = Math.min(Math.abs(angle), 2*Math.PI-Math.abs(angle));","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":402,"value":"shorestRay = Math.min(\n Math.sqrt(Math.pow(points[1].x-points[0].x, 2) + Math.pow(points[1].y-points[0].y, 2)),\n Math.sqrt(Math.pow(points[1].x-points[2].x, 2) + Math.pow(points[1].y-points[2].y, 2))\n);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":399,"value":"radiusToUse = Math.min(cornerRadius, shorestRay* Math.tan(acuteAngle/2));","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":411,"value":"distanceToTangentPoint = Math.abs(radiusToUse / Math.tan(acuteAngle/2));","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":413,"value":"determinant = (points[1].x-points[0].x)*(points[1].y-points[2].y) - (points[1].x-points[2].x)*(points[1].y-points[0].y);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"$4d","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W4e","stdlib":"1"}} 24:null