JavaScript
svg d3 도형
aesup
2021. 12. 9. 16:46
728x90
- 다르게 표현
//Circle Data Set
var circleData = [
{ "cx": 20, "cy": 20, "radius": 20, "color" : "green" },
{ "cx": 70, "cy": 70, "radius": 20, "color" : "purple" }];
//Create the SVG Viewport
var svgContainer = d3.select("body").append("svg")
.attr("width",200)
.attr("height",200);
//Add circles to the svgContainer : virutal element 만들기
var circles = svgContainer.selectAll("circle")
.data(circleData)
.enter()
.append("circle");
//Add the circle attributes : data binding to element
var circleAttributes = circles
.attr("cx", function (d) { return d.cx; })
.attr("cy", function (d) { return d.cy; })
.attr("r", function (d) { return d.radius; })
.style("fill", function (d) { return d.color; });
//Add the SVG Text Element to the svgContainer : virtual element 만들기
var text = svgContainer.selectAll("text")
.data(circleData)
.enter()
.append("text");
//Add SVG Text Element Attributes 텍스트 : data binding to element
var textLabels = text
.attr("x", function(d) { return d.cx; })
.attr("y", function(d) { return d.cy; })
.text( function (d) { return "( " + d.cx + ", " + d.cy +" )"; })
.attr("font-family", "sans-serif")
.attr("font-size", "20px")
.attr("fill", "red");

728x90