CODEWITHSUNDEEP
javascriptd3.js
khalibali
khalibali

Reputation: 133

how do i clear my visualization in order to make space for the updated visualization using svg?

here's my d3.js function to visualize a bar graph:

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;
}

}

It displays a graph based on the selected region on the map dynamically. If i select new region, another graph is being created below the old graph. I want the old graph to clear and new graph to be in place of old graph. How do I achieve that.

I am new to d3.js

Thanks in advance.

Upvotes: 0

Views: 162

Answers (2)

Adam Pearce
Adam Pearce

Reputation: 9293

You can clear away anything inside of the parent container with .html("") while creating your 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 also works but I prefer this slightly terser way of doing it.

Upvotes: 1

NovaPenguin
NovaPenguin

Reputation: 463

Before appending the new avg, just call d3.select('svg').remove(); That will remove the first svg on the page (I'm assuming you only have one). If you don't have an svg, it won't fail, so you can always call it.

Upvotes: 0

Related Questions