Chevrons and Arcs 2

This block uses d3.js v4 with a custom module.

A very basic modification of d3.arc to produce an arc with chevrons, d3.chevronArc. Unlike the first attempt at this, tail ends of arcs are indented.

This block serves primarily as a proof of concept - and not as a demo of a decent module/plugin. It is based entirely off of the d3-shape module's (https://github.com/d3/d3-shape) arc function with few changes and a lot of code removed. In creating it, many or all of the checks for different cases or exceptions were removed.

Six methods are available for chevronArc(), all are required,these are:

innerRadius()
outerRadius()
startAngle() - in radians
endAngle() - in radians

All these behave the same as with d3.arc(). The two new methods are:

startIndent() - the indent in pixels for the tail
endIndent() - the indent (outdent?) in pixels for the head.

var svg = d3.select("#svg").append("svg").attr("width",500).attr("height",500);
var width = 500;
var height = 450;
margin = {bottom: 1, top:1,left:1,right:1};
padding = 2;
marginBottom = 0;

var arcs = [];

var arcs = [
	{start: 1 / 180 * Math.PI, end: 119 / 180 * Math.PI,fill:"#43a2ca",inner:150,outer:200},
	{start: 121 / 180 * Math.PI, end: 239 / 180 * Math.PI,fill:"#43a2ca",inner:150,outer:200},
	{start: 241 / 180 * Math.PI, end: 359 / 180 * Math.PI,fill:"#43a2ca",inner:150,outer:200},
	{start: 119 / 180 * Math.PI, end: 1 / 180 * Math.PI,fill:"#0868ac",inner:205,outer:215},
	{start: 239 / 180 * Math.PI, end: 121 / 180 * Math.PI,fill:"#0868ac",inner:205,outer:215},
	{start: 359 / 180 * Math.PI, end: 241 / 180 * Math.PI,fill:"#0868ac",inner:205,outer:215},	
	{start: 199 / 180 * Math.PI, end: -159 / 180 * Math.PI,fill:"#e0f3db",inner:100,outer:145},	
	{start: 2 / 180 * Math.PI, end: 359 / 180 * Math.PI,fill:"#a8ddb5",inner:45,outer:95}
];

var g = svg.append("g").attr("transform", "translate(" + 500 / 2 + "," + 500 / 2 + ")");

var circle = g.append("circle").attr("r",40).attr("fill","lightblue");

</script>
</body>
</html>

https://cdnjs.cloudflare.com/ajax/libs/d3/4.4.0/d3.js