散点图不断复制自己

Question

我正在尝试在 D3 的帮助下制作一个显示在交互式世界地图下方的散点图。散点图包含来自用户在世界地图中单击的国家/地区的数据。问题是当用户点击另一个国家时，前一个国家的散点图应该会消失。不幸的是，情况并非如此，第二个散点图只出现在第一个散点图下方。有谁知道我该如何解决这个问题？任何帮助将不胜感激。

我用于散点图的部分代码：

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。