react-radial/es/renderObject.js

a radial component built with react and resonance

import { describeArc, describeArcRegion } from './util/svghelper';
import * as d3 from 'd3';

export var renderObject = function renderObject(data, i) {
    var cx = data.cx,
        cy = data.cy,
        radius = data.radius,
        angleStart = data.angleStart,
        angleEnd = data.angleEnd,
        key = data.key,
        fill = data.fill,
        strokeWidth = data.strokeWidth,
        radiusDiff = data.radiusDiff,
        stroke = data.stroke,
        buttonFunctions = data.buttonFunctions,
        text = data.text;

    return {
        g: {
            // parent svg group
            fillOpacity: .6,
            key: key,
            id: 'arc' + text,
            style: {
                transform: 'translate(' + strokeWidth + 'px,' + strokeWidth + 'px)'
            }
        },
        region: {
            // main pie slice
            d: [describeArcRegion(cx, cy, radius, radius + radiusDiff, angleStart, angleEnd)],
            style: {
                fill: fill,
                strokeWidth: strokeWidth,
                stroke: stroke
            }
        },
        arc: {
            // smaller outside arc to set path for text
            d: [describeArc(cx, cy, radius + radiusDiff * .8, angleStart, angleEnd)],
            style: { opacity: 1e-6 },
            id: angleStart
        },
        text: {
            // main text tag
            textAnchor: 'middle',
            fontFamily: 'sans-serif'
        },
        textPath: {
            // each line of text
            fontWeight: 100,
            fill: stroke,
            startOffset: '50%',
            xlinkHref: "#" + angleStart
            // this matches the arc id (above)
        }
    };
};