d3

var renderSvg = function(container) {
    var svg = d3
        .select('#svg-container')
        .append('svg')
        .attr({
            xmlns: "http://www.w3.org/2000/svg",
            xlink: "http://www.w3.org/1999/xlink",
            viewBox: `0 0 ${container.clientWidth} ${container.clientHeight}`
        })
        .call(
            d3.behavior.zoom()
                .on('zoom', function () {
                    svg.attr('transform', 'translate(' + d3.event.translate + ')' + ' scale(' + d3.event.scale + ')')
                })
        )
        .append('g');

    return svg;
};

var renderNodes = function(svg, force) {

    var group = svg.selectAll('g')
        .data(force.nodes())
        .enter()
        .append('g');

    var defs = group
        .append('defs');

    var path = defs
        .append('path')
        .attr({
            id: n => 'path-' + n.id,
            d: n => `m5,${n.radius} a${n.radius - 5},${n.radius - 5} 0 0 0 ${n.radius * 2 - 10},0`
        });

    var circle = group
        .append('circle')
        .attr({
            class: 'circle',
            fill: '#ccc',
            cx: n => n.radius,
            cy: n => n.radius,
            r: n => n.radius
        });

    var text = group
        .append('text')
        .attr({
            fill: '#333',
            'font-size': '15px'
        });

    var textPath = text
        .append('textpath')
        .text(n => n.name)
        .attr('xlink:href', n => '#path-' + n.id)
        .attr({
            'start-offset': '0%',
            'href': n => '#path-' + n.id
        });

    var use = group
        .append('use')
        .attr('xlink:href', n => '#path-' + n.id)
        .attr({
            fill: '#666',
            opacity: '0.1',
            'href': n => '#path-' + n.id
        });

    return group;
};