Following the previous post(2020/12/28 - [d3.js] - axis, ticks), let's applied enter.
<!DOCTYPE html>
<html lang="en">
<head>
<title>D3js</title>
<script src="https://d3js.org/d3.v6.min.js"></script>
</head>
<body>
<script>
var data = [10,20,30];
var canvas = d3.select("body")
.append("svg")
.attr("width",500)
.attr("height", 500)//enter selection
var circle1 = canvas.append("circle")
.attr("cx", 50)
.attr("cy", 100)
.attr("r", 25);//adding a circle manually, it isnt based on data
var circle2 = canvas.append("circle")
.attr("cx", 50)
.attr("cy", 200)
.attr("r", 25);
var circles = canvas.selectAll("circle")//bind the circle to the data
.data(data)
.attr("fill","red") //circle1 and 2 belong to the update selection which means the number of data and dom is same
.enter()//enter selection is empty since there are no data elements that has not been successfully bound to existing doom elements
.append("circle")
.attr("cx", 50)
.attr("cy", 50)
.attr("fill","green")
.attr("r", 25); //r : radius
</script>
</body>
</html> doom is such as rectangles, circles.
enter() is when data is bigger than doom
update() is when data is same as doom
exit() is when doom is bigger than data
- Result
'd3.js' 카테고리의 다른 글
| interaction between html document and console (0) | 2020.12.28 |
|---|---|
| duration, delay, transition, on (0) | 2020.12.28 |
| axis, ticks (0) | 2020.12.28 |
| scale (0) | 2020.12.28 |
| selectall, enter, function (0) | 2020.12.28 |