javascript - 如何清除可视化以便为使用 svg 更新的可视化腾出空间？

Question

这是我的 d3.js 函数，用于可视化条形图:

function barGraph(data1)
{
    // console(data1.count); 
    var i = 0;  
    data1.forEach(function(d){
       while(i>0){
        d.avspeed= +d.avspeed;
        d.duration = +d.duration;

        i--;
}
})


    //console.log(data1.avspeed);
   // console.log(data1.avspeed);
var margin = {top: 40, right: 20, bottom: 30, left: 40},
    width = 960 - margin.left - margin.right,
    height = 500 - margin.top - margin.bottom;

//console.log(data1.avspeed);


 console.log("hey1");




var formatPercent = d3.format("");

console.log("hey2");
var x = d3.scale.ordinal()
    .rangeRoundBands([0, width], .1);

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

var xAxis = d3.svg.axis()
    .scale(x)
    .orient("bottom");
    console.log("hey");

var yAxis = d3.svg.axis()
    .scale(y)
    .orient("left")
    .tickFormat(formatPercent);

console.log("hey3");

var tip = d3.tip()
  .attr('class', 'd3-tip')
  .offset([-10, 0])
  .html(function(d) {

    return "<strong>Avg Speed:</strong> <span style='color:red'>" + d.avspeed + "</span>";
  })


var svg = d3.select("#rightside").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 + ")");

svg.call(tip);


console.log("heyllo ");


  x.domain(data1.map(function(d) { return d.tripid; }));
  y.domain([0, d3.max(data1, function(d) { return d.avspeed; })]);




  svg.append("g")
      .attr("class", "x axis")
      .attr("transform", "translate(0," + height + ")")
      .call(xAxis);

  svg.append("g")
      .attr("class", "y axis")
      .call(yAxis)
    .append("text")
      .attr("transform", "rotate(-90)")
      .attr("y", 6)
      .attr("dy", ".71em")
      .style("text-anchor", "end")
      .text("Avg Speed");



  svg.selectAll(".bar")
      .data(data1)
    .enter().append("rect")
      .attr("class", "bar")
      .attr("x", function(d) { return x(d.tripid); })
      .attr("width", x.rangeBand())
      .attr("y", function(d) { return y(d.avspeed); })
      .attr("height", function(d) { return height - y(d.avspeed); })
      .on('mouseover', tip.show)
      .on('mouseout', tip.hide)
      console.log(d.avspeed);

console.log("hello234");

function type(d) {
  d.avspeed = +d.avspeed;
  return d;
}

}

它根据 map 上选定的区域动态显示图形。如果我选择新区域，则会在旧图表下方创建另一个图表。我希望旧图清晰，新图取代旧图。我该如何实现这一目标。

我是 d3.js 新手

提前致谢。

Answer 1

您可以在创建 svg 时使用 .html("") 清除父容器内的所有内容:

var svg = d3.select("#rightside").html("").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 + ")");

remove 也可以，但我更喜欢这种稍微简洁的方法。