d3.js - Scatterplot is not updating the number of circles -
so here code, in gist, can save html file , try it:
https://gist.github.com/babakinks/5407967
so @ beginning assuming default number scatter plot circles, , draw scatter plot
var numdatapoints = 50; then @ bottom, have listener redraws scatter plot random new values, , works..but wanted improve such can type how many circles draw in text box , should draw many circles, not same 50 began with. doesn't listen me! yes redraw circles new random values still drawing same number of circles had @ first . don't know how fix part, pretty new d3.js . way expecting work wrong?
//on click, update new data d3.select("#drawbtn") .on("click", function() {
you need add enter() , remove() selections:
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>yguyghggjkgh</title> <script src="http://d3js.org/d3.v3.min.js"></script> <style type="text/css"> .axis path, .axis line { fill: none; stroke: black; shape-rendering: crispedges; } .axis text { font-family: sans-serif; font-size: 11px; } </style> </head> <body> <div> <input type="text" id="count" name="howmany"> <input type="button" id="drawbtn" value="draw"> </div> <script type="text/javascript"> //width , height var w = 500; var h = 300; var padding = 30; //dynamic, random dataset var dataset = []; //initialize empty array var numdatapoints = 50; console.log("so here.") var maxrange = math.random() * 1000; //max range of new values (var = 0; < numdatapoints; i++) { //loop numdatapoints times var newnumber1 = math.floor(math.random() * maxrange); //new random integer var newnumber2 = math.floor(math.random() * maxrange); //new random integer dataset.push([newnumber1, newnumber2]); //add new number array } //create scale functions var xscale = d3.scale.linear() .domain([0, d3.max(dataset, function(d) { return d[0]; })]) .range([padding, w - padding * 2]); var yscale = d3.scale.linear() .domain([0, d3.max(dataset, function(d) { return d[1]; })]) .range([h - padding, padding]); //define x axis var xaxis = d3.svg.axis() .scale(xscale) .orient("bottom") .ticks(5); //define y axis var yaxis = d3.svg.axis() .scale(yscale) .orient("left") .ticks(5); //create svg element var svg = d3.select("body") .append("svg") .attr("width", w) .attr("height", h); //create circles svg.selectall("circle") .data(dataset) .enter() .append("circle") .attr("cx", function(d) { return xscale(d[0]); }) .attr("cy", function(d) { return yscale(d[1]); }) .attr("r", 2); //create x axis svg.append("g") .attr("class", "axis") .attr("transform", "translate(0," + (h - padding) + ")") .call(xaxis); //create y axis svg.append("g") .attr("class", "axis") .attr("transform", "translate(" + padding + ",0)") .call(yaxis); //on click, update new data d3.select("#drawbtn") .on("click", function() { //new values dataset var numvalues = parseint(document.getelementbyid('count').value, 10); console.log(numvalues); var maxrange = math.random() * 1000; dataset = []; //initialize empty array (var = 0; < numvalues; i++) { //loop numvalues times var newnumber1 = math.floor(math.random() * maxrange); //new random integer var newnumber2 = math.floor(math.random() * maxrange); //new random integer dataset.push([newnumber1, newnumber2]); //add new number array } //update scale domains xscale.domain([0, d3.max(dataset, function(d) { return d[0]; })]); yscale.domain([0, d3.max(dataset, function(d) { return d[1]; })]); //update circles svg.selectall("circle") .data(dataset) .transition() .duration(1000) .attr("cx", function(d) { return xscale(d[0]); }) .attr("cy", function(d) { return yscale(d[1]); }); //enter new circles svg.selectall("circle") .data(dataset) .enter() .append("circle") .attr("cx", function(d) { return xscale(d[0]); }) .attr("cy", function(d) { return yscale(d[1]); }) .attr("r", 2); // remove old svg.selectall("circle") .data(dataset) .exit() .remove() }); </script> </body> </html>
Comments
Post a Comment