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
'd3.js' 카테고리의 다른 글
| cluster (0) | 2020.12.30 |
|---|---|
| tree layout, tree.nodes, tree.links (0) | 2020.12.29 |
| scaleOrdinal, pie, centroid (0) | 2020.12.29 |
| arc (0) | 2020.12.29 |
| path (0) | 2020.12.29 |