- HTML document
<!DOCTYPE html>
<html lang="en">
<head>
<title>D3js</title>
<script src="https://d3js.org/d3.v6.min.js"></script>
</head>
<body>
<script>
var canvas = d3.select("body").append("svg")
.attr("width",500)
.attr("height",500);
var data = [
{x:10, y:20},
{x:40, y:60},
{x:50, y:70}
];
var group = canvas.append("g")
.attr("transform", "translate(100,100)");
var line = d3.line()
.x(function (d) {return d.x;}) //represents each x coordinate
//this function will return each of x properties from the data
.y(function (d) {return d.y;});
group.selectAll("path")
.data([data])//bind the data to the path, just pass whole array and create a single line out of it
.enter()
.append("path")
.attr("d", line) //all that path data is stored in this D
//it translates the data to this path data and string
//path would be super long but instead it will refer to path generator
.attr("fill", "none")
.attr("stroke", "#000")
.attr("stroke-width", 10);
</script>
</body>
</html>
- Console in the Inspector
Path(super long as I said above) has been created.
- Result
'd3.js' 카테고리의 다른 글
| scaleOrdinal, pie, centroid (0) | 2020.12.29 |
|---|---|
| arc (0) | 2020.12.29 |
| load external data(json data) (0) | 2020.12.28 |
| interaction between html document and console (0) | 2020.12.28 |
| duration, delay, transition, on (0) | 2020.12.28 |