如何清除我的可视化文件，以便为使用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; 
} 

} 

它显示了基于动态地图上选择的区域图。如果我选择新区域，则在旧图形下面创建另一个图形。我想要旧图形清除，新图形将替代旧图形。我如何做到这一点。

我是新来的d3.js

在此先感谢。

Answer 1

可以清除掉任何父容器的内部与.html("")而创建svg：

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也的作品，但我更喜欢做的这种略带更简洁的方式。

Answer 2

在添加新的平均值之前，只需拨打d3.select('svg').remove();这将删除页面上的第一个svg（我假设你只有一个）。如果你没有svg，它不会失败，所以你可以随时调用它。