Every time I click on the button the graph is generated again without disappearing the previous one, I understand this problem but I had never used js so I want to know how to do so that the graph simply updates and does not generate another one.
function datos(){
var hr1 = document.getElementById('hr1').value;
var hr13 = document.getElementById('hr13').value;
var hr36 = document.getElementById('hr36').value;
var hrtdo = document.getElementById('hrtdo').value;
var chartData =[hr1,hr13,hr36,hrtdo];
var margin = {
top:30,
right:30,
bottom: 40,
left: 50
}
var height = 600 - margin.top - margin.bottom;
var width = 800 - margin.right - margin.left;
//var barWidth = 35;
//var barOffset = 5;
var yScale = d3.scale.linear()
.domain([0,d3.max(chartData)])
.range([0, height]);
var xScale = d3.scale.ordinal()
.domain(d3.range(0, chartData.length))
.rangeBands([0, width]);
var colors = d3.scale.linear()
.domain([0, chartData.length])
.range(['#B03648','#SSA4243B'])
d3.select('#chart').append('svg')
.attr('width', width + margin.right + margin.left)
.attr('height', height + margin.top + margin.bottom)
.append('g')
.attr('transform', 'translate('+margin.left+ ',' + margin.top+')')
.style('background', '#f4f4f4')
.selectAll('rect')
.data(chartData)
.enter().append('rect')
.style('fill', function(d,i){
return colors(i);
})
.attr('width', xScale.rangeBand())
.attr('height', function(d){
return yScale(d);
})
.attr('x', function(d, i){
return xScale(i);
})
.attr('y', function(d){
return height - yScale(d);
})
var vScale = d3.scale.linear()
.domain([0,d3.max(chartData)])
.range([height, 0]);
var hScale = d3.scale.ordinal()
.domain(["1 hora","2-3 horas","4-6 horas","TODO EL DIA"])
.rangeBands([0, width]);
//V axis
var vAxis = d3.svg.axis()
.scale(vScale)
.orient('left')
.ticks(5)
.tickPadding(5)
// V GUIDE
var vGuide = d3.select('svg')
.append('g')
vAxis(vGuide)
vGuide.attr('transform','translate('+margin.left+','+margin.top+')')
vGuide.selectAll('path')
.style('fill','none')
.style('stroke', '#000')
vGuide.selectAll('line')
.style('stroke','#000')
//H axis
var hAxis = d3.svg.axis()
.scale(hScale)
.orient('bottom')
.tickValues(hScale.domain().filter(function(d, i){
return !(i % (chartData.length/4));
}));
// H GUIDE
var hGuide = d3.select('svg')
.append('g')
hAxis(hGuide)
hGuide.attr('transform','translate('+margin.left+ ','+(height + margin.top
)+')')
hGuide.selectAll('path')
.style('fill','none')
.style('stroke', '#000')
hGuide.selectAll('line')
.style('stroke','#000')
}<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<html>
<head>
<title>Generador de widget</title>
<link rel="stylesheet" href="index_style.css" />
<script src="http://d3js.org/d3.v3.min.js" language="JavaScript"></script>
</head>
<body bgcolor = "white">
<div id="menu">
<ul>
<li><a href="../Circle menu/index.htm">Menu principal</a></li>
<li><a href="../LIQUID GAUGE/index.html">Grafica de porcentajes</a></li>
</ul>
</div>
<font color = "#B03648" face = "arial" size = "5"><center><h1><u><b><i>Generador de widget</b></i></u></h1>
<form name="form1" method = "get">
Clientes que pagaron 1 a 2 horas.
<input type = "decimal" id = "hr1" name = "hr1"><br>
Clientes que pagaron 3 a 4 horas.
<input type = "decimal" id = "hr13" name = "hr13"><br>
Clientes que pagaron 5 a 6 hrs.
<input type = "decimal" id = "hr36" name = "hr36"><br>
Clientes que pagaron por todo el dia.
<input type = "decimal" id = "hrtdo" name = "hrtdo"><br>
<input type = "button" value = "calcular" onclick="datos()">
</form>
</font>
<div id="chart">
<script src="gdpBarGraph.js" language="JavaScript"></script>
</div>
</body>
</html>