Built with blockbuilder.org
xxxxxxxxxx<html lang="en"> <head> <meta charset="utf-8"> <title>D3: Adding values and elements to a chart</title> <script type="text/javascript" src="https://d3js.org/d3.v4.min.js"></script> <style type="text/css"> /* No style rules here yet */ </style> </head> <body> <script type="text/javascript">// the margin convention var margin = {top: 20, right: 10, bottom: 20, left: 10}; var width = 960 - margin.left - margin.right, height = 500 - margin.top - margin.bottom; d3.select("body").append("button") .attr("id","button1") .text(1) var svg = d3.select("body").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 + ")");var data = [[0,0],[15,4.841229183],[30,13.69306394],[45,25.15576475],[60,38.72983346],[75,54.12658774],[90,71.15124735],[105,89.6608192],[120,109.5445115],[135,130.7131879],[150,153.0931089],[165,176.621948],[180,201.246118],[195,226.9189007],[210,253.5990931],[225,281.25],[240,309.8386677],[255,339.3352877],[270,369.7127263],[285,400.9461466],[300,433.0127019],]; var xScale = d3.scaleLinear() .domain([0, d3.max(data, function(d,i) { return data[i][0]; })]) .range([margin.left, width]); var yScale = d3.scaleLinear() .domain([0, d3.max(data, function(d,i) { return data[i][1]; })]) .range([height, margin.top]); var xAxis = d3.axisBottom() .scale(xScale); var yAxis = d3.axisLeft() .scale(yScale); svg.append("g").call(xAxis) .attr("transform", "translate(" + 10 + "," + height + ")"); svg.append("g").call(yAxis) .attr("transform", "translate(" + 20 + "," + 0 + ")"); svg.selectAll("circle") .data(data) .enter() .append("circle") .attr("cx", function (d, i){ return data[i][0]+20; }) .attr("cy", function(d, i) { return -data[i][1]+height; }) .attr("r", 10) .attr("stroke", "red") .attr("fill", "green"); d3.select("#button1") .on("click", function repeat() { svg.selectAll("circle") .data(data) .transition() .duration(500) .delay (function (d,i){ return i*20;}) .attr("cx", function (d, i){ return data[i][1]+20;}) .attr("cy", function(d, i) { return -data[i][0]+height;}) .attr("r", 10) .attr("stroke", "black") .attr("fill", "blue") .transition() .duration(500) .delay(700) .attr("cx", function (d, i){ return data[i][0]+20;}) .attr("cy", function(d, i) { return -data[i][1]+height;}) .attr("r", 10) .attr("stroke", "black") .attr("fill", "orange") .on("end", repeat); }); </script> </body></html> https://d3js.org/d3.v4.min.js