Function createVisualization

src/shared/createVisualization.js:10–85

({svgElement, root, onHover, onUnhover})

export default function createVisualization({svgElement, root, onHover, onUnhover}) {
    let chartSize = (root.maxDepth > 9) ? 950 : 750;
    let radius = Math.min(chartSize, chartSize) / 2;


    let partition = d3.layout.partition()
        .size([2 * Math.PI, radius * radius])
        .value(d => d.size);


    let arc = d3.svg.arc()
        .startAngle(d => d.x)
        .endAngle(d => d.x + d.dx)
        //.innerRadius(d => d.y / 400 + 60)
        //.outerRadius(d => (d.y + d.dy) / 400 + 60);
        .innerRadius(d => Math.sqrt(d.y))
        .outerRadius(d => Math.sqrt(d.y + d.dy));


    if (vis) {
        svgElement.innerHTML = '';
    }


    // Filter out very small nodes
    let nodes = partition.nodes(root).filter(d => d.dx > 0.005); // 0.005 radians

    markDuplicates(nodes);


    vis = d3.select(svgElement)
        .attr('width', chartSize)
        .attr('height', chartSize)
        .append('svg:g')
        .attr('id', 'svgWrapper')
        .attr('transform', `translate(${chartSize / 2}, ${chartSize / 2})`);


    paths = vis.data([root]).selectAll('path')
        .data(nodes)
        .enter()
        .append('svg:path')
        .attr('display', d => (d.depth ? null : 'none'))
        .attr('d', arc)
        .attr('fill-rule', 'evenodd')
        .style('stroke', d => (d.duplicate) ? '#000' : '')
        .style('fill', d => getColor(d))
        .style('opacity', 1)
        .on('mouseover', object => {
            mouseover(object, onHover);
        });

    totalSize = paths.node().__data__.value;


    let svgWrapper = vis[0][0];
    let chart = svgElement.parentNode;