An example of generating custom SVG paths, with arcs
Built with blockbuilder.org
forked from tomshanley's block: Custom SVG path with arcs
Created
April 16, 2018 07:43
-
-
Save lorenzopub/cfe20af0bcaeb7fcefbbb74d4ba2bacf to your computer and use it in GitHub Desktop.
Custom SVG path with arcs
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| license: mit |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <head> | |
| <meta charset="utf-8"> | |
| <script src="https://d3js.org/d3.v4.min.js"></script> | |
| <style> | |
| body { margin:0;top:0;right:0;bottom:0;left:0; } | |
| </style> | |
| </head> | |
| <body> | |
| <script> | |
| let data = [ | |
| { | |
| "start": 10, "startValue": 7, | |
| "end": 75, "endValue": 20, | |
| "above": true | |
| }, | |
| { | |
| "start": 15, "startValue": 3, | |
| "end": 60, "endValue": 18, | |
| "above": false | |
| }, | |
| { | |
| "start": 50, "startValue": 15, | |
| "end": 90, "endValue": 20, | |
| "above": false | |
| } | |
| ] | |
| let width = 500 | |
| let height = width | |
| let xScale = d3.scaleLinear() | |
| .domain([0, 100]) | |
| .range([0, width]) | |
| let g = d3.select("body").append("svg") | |
| .attr("width", width) | |
| .attr("height", width) | |
| .append("g") | |
| g.append("line") | |
| .attr("x1", 0) | |
| .attr("y1", height/2) | |
| .attr("x2", width) | |
| .attr("y2", height/2) | |
| .style("stroke", "black") | |
| let arcs = g.selectAll("path") | |
| .data(data) | |
| .enter() | |
| .append("g") | |
| arcs.append("path") | |
| .attr("d", function(d){ | |
| let x1 = xScale(d.start) - (xScale(d.startValue)/2) | |
| let x2 = xScale(d.start) + (xScale(d.startValue)/2) | |
| let x3 = xScale(d.end) - (xScale(d.endValue)/2) | |
| let x4 = xScale(d.end) + (xScale(d.endValue)/2) | |
| let r2to3 = (x3 - x2)/2 | |
| let r4to1 = (x4 - x1)/2 | |
| let y = height/2 | |
| let sweep2to3 = d.above ? 1 : 0 | |
| let sweep4to1 = d.above ? 0 : 1 | |
| return "M" + x1 + " " + y + " " | |
| + "L" + x2 + " " + y + " " | |
| + "A" + r2to3 + " " + r2to3 + " 0 0 " + sweep2to3 + " " + x3 + " " + y | |
| + "L" + x4 + " " + y + " " | |
| + "A" + r4to1 + " " + r4to1 + " 0 0 " + sweep4to1 + " " + x1 + " " + y | |
| }) | |
| .style("fill", "pink") | |
| .style("opacity", 0.6) | |
| </script> | |
| </body> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment