Question

我已经设置了一个D3弧线来显示数字（以百分比表示），并且图表本身运行良好，但是当我尝试通过JSON提要（通过PHP）对其进行更新时，它只是在页面上绘制了另一个项目没有清理。尝试在线阅读所有文档，但似乎没有任何代码与我看到的代码相似。

最新尝试是添加“ .data（meter）.exit（）。remove（）;”但这没什么区别。从JSON移交的值是： endPercent：0.13 asalabel：“ 00:00:05”

function doOnLoad() {
    var colors = {
    'pink': '#E1499A',
    'yellow': '#f0ff08',
    'green': '#47e495'
};
function initData(){
var color = colors.green;

var radius = 200;
var border = 40;
var padding = 30;
var startPercent = 0;
//var endPercent = 0.85;
var endPercent = [];
var valueLimit = 0.20;
var asalabel = [];


var twoPi = Math.PI * 2;
var formatPercent = d3.format('.0%');
var boxSize = (radius + padding) * 2;
var parent = d3.select('div#content');

getData = d3.json('getCallAsa.php', function(error, data) {
        if (error) throw error;
console.log(data);
    data.forEach(function (d) {
        value = JSON.parse(d.endPercent);
        value2 = d.value2;
        endPercent.push(value);
        asalabel.push(value2);

    });

var count = Math.abs((endPercent - startPercent) / 0.01);
var step = endPercent < startPercent ? -0.01 : 0.01;

var arc = d3.svg.arc()
    .startAngle(0)
    .innerRadius(radius)
    .outerRadius(radius - border);



var svg = parent.append('svg')
    .attr('width', boxSize)
    .attr('height', boxSize);

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

var filter = defs.append('filter')
    .attr('id', 'blur');

filter.append('feGaussianBlur')
    .attr('in', 'SourceGraphic')
    .attr('stdDeviation', '7');


var g = svg.append('g')
    .attr('transform', 'translate(' + boxSize / 2 + ',' + boxSize / 2 + ')');


var meter = g.append('g')
    .attr('class', 'progress-meter');

    // remove data not used
  g.datum(data).selectAll("path")
    .data(meter).exit().remove();

meter.append('path')
    .attr('class', 'background')
    .attr('fill', '#555')
    .attr('fill-opacity', 0.5)
    .attr('d', arc.endAngle(twoPi));

var foreground = meter.append('path')
    .attr('class', 'foreground')
    .attr("fill", function(d) { if (endPercent < valueLimit) { return colors.green;} else if (endPercent > valueLimit) { return colors.pink } else {return colors.yellow;};})
    .attr('fill-opacity', 1)
    .attr("stroke", function(d) { if (endPercent < valueLimit) { return colors.green;} else if (endPercent > valueLimit) { return colors.pink } else {return colors.yellow;};})
    .attr('stroke-width', 10)
    .attr('stroke-opacity', 1)
    .attr('filter', 'url(#blur)');

var front = meter.append('path')
    .attr('class', 'foreground')
    //.attr('fill', color)
    .attr('fill-opacity', 1)
    .attr("fill", function(d) { if (endPercent < valueLimit) { return colors.green;} else if (endPercent > valueLimit) { return colors.pink } else {return colors.yellow;};});

var numberText = meter.append('text')
    .attr("fill", function(d) { if (endPercent < valueLimit) { return colors.green;} else if (endPercent > valueLimit) { return colors.pink } else {return colors.yellow;};})
    .attr('text-anchor', 'middle')
    .attr('dy', '.35em');

function updateProgress(progress) {
    meter.exit().remove();
    foreground.attr('d', arc.endAngle(twoPi * progress));
    front.attr('d', arc.endAngle(twoPi * progress));
    numberText.text(asalabel);
}

var progress = startPercent;


(function loops() {
    updateProgress(progress);

    if (count > 0) {
        count--;
        progress += step;
        setTimeout(loops, 10);
    }
})();

 });
}
setInterval(initData,2000);
}

Answer 1

我会将svg初始化移到d3.json调用之外，因为您当前正在为每个可视化创建一个新的svg，这将导致您每次加载新数据时都重新绘制图表。然后，我将在d3.json调用开始时清除svg。下面的示例代码：

__declspec(noinline)

重绘之前未清除D3图表

1 个答案: