You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
22 lines
1.0 KiB
JavaScript
22 lines
1.0 KiB
JavaScript
var jsonCircles = [
|
|
{ "x_axis": 30, "y_axis": 30, "radius": 20, "color" : "green" },
|
|
{ "x_axis": 70, "y_axis": 70, "radius": 20, "color" : "purple"},
|
|
{ "x_axis": 110, "y_axis": 100, "radius": 20, "color" : "red"}];
|
|
|
|
var svgContainer = d3.select("body").append("svg")
|
|
.attr("width", 200)
|
|
.attr("height", 200);
|
|
|
|
// build the circles
|
|
var circles = svgContainer.selectAll("circle")
|
|
.data(jsonCircles) //place holder
|
|
.enter() //reference
|
|
.append("circle"); //3 circles
|
|
|
|
// map json key to attributes (cx,cy,r,fill)
|
|
var circleAttributes = circles
|
|
.attr("cx", function (d) { return d.x_axis; })
|
|
.attr("cy", function (d) { return d.y_axis; })
|
|
.attr("r", function (d) { return d.radius; })
|
|
.style("fill", function(d) { return d.color; });
|
|
|