Scatterplot продолжает копировать себя

Question

Я пытаюсь сделать диаграмму рассеяния, которая появляется под интерактивной картой мира с помощью D3. Диаграмма рассеяния содержит данные из страны, на которую пользователь нажал в worldmap. Проблема в том, что когда пользователь нажимает на другую страну, диаграмма рассеяния предыдущей страны должна исчезнуть. К сожалению, это не так, вторая диаграмма рассеяния появляется только под первой диаграммой рассеяния. Кто-нибудь знает, как я могу это исправить? Любая помощь будет принята с благодарностью.

Часть кода я использую для рассеивания:

function ScatterCorruption(dataset, title){ 

    var xValue = function(d) { return d.GDP;} 
    var yValue = function(d) { return d.Variable;} 

    // determine parameters 
    var margin = {top: 20, right: 20, bottom: 200, left: 70}, 
     width = 600 - margin.left - margin.right, 
     height = 500 - margin.top - margin.bottom; 

    // formatters for axis and labels 
    var currencyFormat = d3.format("0.2f"); 
    var decimalFormat = d3.format("0.2f"); 

    // determine x scale 
    var x = d3.scale.linear() 
    .range([0, width]); 

    // determine y scale 
    var y = d3.scale.linear() 
    .range([height, 0]); 

    // determine x-axis 
    var xAxis = d3.svg.axis() 
    .scale(x) 
    .orient("bottom"); 

    // determine y-axis 
    var yAxis = d3.svg.axis() 
    .scale(y) 
    .orient("left"); 

    // make svg 
    var svg = d3.select("body").append("svg") 
    .attr("width", width + margin.left + margin.right) 
    .attr("height", height + margin.top + margin.bottom) 
    .append("g") 
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); 

    // add the tooltip area to the webpage 
var tooltip = d3.select("body").append("div") 
    .attr("class", "tooltip") 
    .style("opacity", 0); 

    console.log(dataset) 

    // load in data 
    d3.tsv(dataset, function(error, data) { 
     if (error) throw error; 

     // convert data 
     data.forEach(function(d) { 

     d.GDP = +d.GDP; 
     d.Variable = +d.Variable; 
     }); 

Answer 1

Вы должны назвать это до рендеринга нового разброса: d3.selectAll("svg > *").remove(); так, что ваш SVG ясно снова. В качестве альтернативы вы также можете сделать d3.select("svg").remove();, а затем воссоздать svg.