d3.js
diagonal
Naranjito
2020. 12. 29. 16:22
Let's draw diagonal.
<!DOCTYPE html>
<html lang="en">
<head>
<title>D3js</title>
<script src="https://d3js.org/d3.v3.min.js"></script>
</head>
<body>
<script>
var canvas = d3.select("body").append("svg")
.attr("width",500)
.attr("height",500);
var diagonal = d3.svg.diagonal()//diagonal path generator
//diagonal expects two objects which are the source object and the target object.
//The source object describes the starting point of the path
//The target describes the ending point of the path
.source({x:10, y:10})//start point, it expects objects with cordinates
.target({x:300, y:300}); //ending point of the path
canvas.append("path")
.attr("fill", "none")
.attr("stroke","orange")
.attr("d", diagonal);//d is path data which is been generated from the path generator diagonal
</script>
</body>
</html>
- Result
