function render()

in Website/Packages/datax-metrics/src/modules/metrics/components/d3.gauge.js [119:200]

• 69 lines of code
• 1 McCabe index (conditional complexity)

    function render(newValue) {
        svg = d3
            .select(container)
            .append('svg:svg')
            .attr('class', 'gauge')
            .attr('width', config.clipWidth)
            .attr('height', config.clipHeight);

        var centerTx = centerTranslation();

        var arcs = svg
            .append('g')
            .attr('class', 'arc')
            .style('fill', 'steelblue')
            .attr('transform', centerTx);

        arcs.selectAll('path')
            .data(tickData)
            .enter()
            .append('path')
            .attr('fill', function(d, i) {
                return config.arcColorFn(d * i);
            })
            .attr('d', arc);

        var lg = svg
            .append('g')
            .attr('class', 'label')
            .style('text-anchor', 'middle')
            .style('font-size', '12px')
            .style('font-weight', 'bold')
            .style('fill', '#666')
            .attr('transform', centerTx);
        lg.selectAll('text')
            .data(ticks)
            .enter()
            .append('text')
            .attr('transform', function(d) {
                var ratio = scale(d);
                var newAngle = config.minAngle + ratio * range;
                return 'rotate(' + newAngle + ') translate(0,' + (config.labelInset - r) + ')';
            })
            .text(config.labelFormat);

        var lineData = [
            [config.pointerWidth / 2, 0],
            [0, -pointerHeadLength],
            [-(config.pointerWidth / 2), 0],
            [0, config.pointerTailLength],
            [config.pointerWidth / 2, 0]
        ];

        var pointerLine = d3.line().curve(d3.curveLinear);
        var pg = svg
            .append('g')
            .data([lineData])
            .attr('class', 'pointer')
            //.style('fill', '#e85116')
            .style('fill', 'black')
            //.style('stroke', '#b64011')
            .attr('transform', centerTx);

        valueText = svg
            .append('g')
            .attr('class', 'label')
            .style('text-anchor', 'middle')
            .style('font-size', '12px')
            .style('font-weight', 'bold')
            //.style('fill', '#666')
            .append('text')
            .attr('x', r)
            .attr('y', r + 20);

        pointer = pg
            .append('path')
            .attr('d', pointerLine /*function(d) { return pointerLine(d) +'Z';}*/)
            .attr('transform', 'rotate(' + config.minAngle + ')');

        update(newValue);

        return that;
    }