d3-arc-menu.js

d3.event.preventDefault();

        let nodeGroup = g.select('#' + d3.event.toElement.parentNode.id);

        const r = 30;
        const k = Math.PI * 2 / (100 / r);
        const arcPercentLength = percent => (k * percent + ' ' + (k * 100 - percent));
        const rotate = times => -times * r * Math.PI * 2;


        const colors = [
            '#ce994b',
            '#4b99ce',
            '#4bce99',
            '#ce4b99',
            '#99ce4b',
        ];

        colors.forEach((color, i) => {
            nodeGroup
                .append("circle")
                .attr('dx', nodeGroup.select('circle').attr('dx'))
                .attr('dy', nodeGroup.select('circle').attr('dy'))
                .attr('r', r)
                .attr('stroke-dasharray', arcPercentLength(80 / colors.length))
                .attr('stroke-dashoffset', rotate(i / colors.length))
                .attr('stroke', color)
                .attr('stroke-width', r / 1.75)
                .attr('fill', 'transparent')
                .on('click', function (n) {
                    console.log(i, n);
                });
        });