javascript - create three circles using D3 -
i started learning d3. tutorial website, found following code:
<!doctype html> <html> <head> <script type="text/javascript" src="http://mbostock.github.com/d3/d3.js"></script> </head> <body> <div id="viz"></div> <script type="text/javascript"> var samplesvg = d3.select("#viz") .append("svg") .attr("width", 100) .attr("height", 100); samplesvg.append("circle") .style("stroke", "gray") .style("fill", "white") .attr("r", 40) .attr("cx", 50) .attr("cy", 50) .on("mouseover", function(){d3.select(this).style("fill", "aliceblue");}) .on("mouseout", function(){d3.select(this).style("fill", "white");}); </script> </body> </html> this code places circle onto screen. want know there way place 3 circles on screen individually? not talking binding data graphs , generating several circles @ same time following code does:
var dataset = []; var = 0; for( = 0; < 5; ++i){ dataset.push(math.round(math.random() * 100)); } = 0.5; var samplesvg = d3.select("#viz") .append("svg") .attr("width", 500) .attr("height", 100); samplesvg.selectall("circle") .data(dataset) .enter().append("circle") .style("stroke", "gray") .style("fill", "white") .attr("r", 40) .attr("cx", function(){return (i++) * 80;}) .attr("cy", 40) .on("mouseover", function(){d3.select(this).style("fill", "aliceblue");}) .on("mouseout", function(){d3.select(this).style("fill", "white");}) .on("mousedown", animatefirststep); //animatefirststep transition() function
create array div ids , loop through this.
var temparray = ["viz", "viz1", "viz2", "viz3"]; check fiddle: http://jsfiddle.net/ehqvh/
js
var temparray = ["viz", "viz1", "viz2", "viz3"]; (var = 0; < temparray.length; i++) { var samplesvg = d3.select("#"+temparray) .append("svg") .attr("width", 100) .attr("height", 100); samplesvg.append("circle") .style("stroke", "gray") .style("fill", "white") .attr("r", 40) .attr("cx", 50) .attr("cy", 50) .on("mouseover", function () { d3.select(this).style("fill", "aliceblue"); }) .on("mouseout", function () { d3.select(this).style("fill", "white"); }); } html
<div id="viz"></div>
Comments
Post a Comment