xxxxxxxxxx<head> <meta charset="utf-8"> <script src="https://d3js.org/d3.v4.min.js"></script> <style> body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; } circle{fill:steelblue} </style></head><body> <script> // Feel free to change or delete any of the code you see in this editor! var dataArray= [20,40,50]; var canvas = d3.select("body") .append("svg") .attr("width", 500) .attr("height", 500); var bars = canvas.selectAll("rect") .data(dataArray) .enter() .append("rect") .attr("width",function(d) {return d*10}) .attr("height",50) .attr("y",function(d, i){return i*100}); // var ball = svg.selectAll("circle")// .data(dataArray)// .enter()// .append("circle")// .attr("r",20)// .attr("cx",function(d){return *10})// .attr("cy",function(d, i){return i*100}); // var set=d3.set([1,2,3]); // var circle = svg.append("circle")// .attr("cx", 50)// // .attr("r", 20)// var circle = svg.append("circle")// .attr("cx", 100) // var circle = svg.append("circle")// .attr("cx", 150) // var circle = d3.selectAll("circle")// .attr("r",20)// .attr("cy", 200) </script></body> https://d3js.org/d3.v4.min.js