D3 Examples - Arcs and Chevrons

Arcs and Chevrons

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

A very basic modification of d3.arc() to produce an arc that ends with a chevron/point, d3.chevronArc. 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.

Four methods are available for chevronArc(), these are:

innerRadius()

outerRadius()

startAngle() - in radians

endAngle() - in radians

All behave the same as with d3.arc().

xxxxxxxxxx
 
<html>
<head>
</head>
<body>
<div id="svg"> </div>
    
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.4.0/d3.js"></script>
<script src="d3-chevronArc.js"></script>
<script>
​
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: 200 / 180 * Math.PI, end: -159 / 180 * Math.PI,fill:"#e0f3db",inner:100,outer:145}, 
    {start: 1 / 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 arc = d3.chevronArc()
            .innerRadius(function(d) { return d.inner; })
            .outerRadius(function(d) { return d.outer; })
            .startAngle(function(d) { return d.start })
            .endAngle(function(d) { return d.end });
        
        g.selectAll(".arcs").data(arcs).enter().append('path')
            .attr("fill", function(d) { return d.fill; })
            .attr('d', function(d) { 
                return arc(d);
        });
​
    
    var circle = g.append("circle").attr("r",40).attr("fill","lightblue");
        
​
 
</script>
</body>
</html>
    