0

Cada vez que doy click en el boton la grafica vuelve a generarse sin desaparecer la anterior, comprendo este problema pero nunca habia usado js asi que quiero saber como hacer para que la grafica simplemente se actualice y no genere otra mas.

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>

1 respuesta 1

0

Supongo que la api de d3.js tendrá alguna opción, pero vaciando chart antes de llenarlo te funciona. añade al inicio de datos

 document.getElementById('chart').innerHTML  ="";

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'])
 document.getElementById('chart').innerHTML  ="";
d3.selectAll('#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>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.