Inspired from website W3SCHOOL SVG EXAMPLE
Built with blockbuilder.org
forked from loveice622's block: assignment_graphic
license: mit |
Inspired from website W3SCHOOL SVG EXAMPLE
Built with blockbuilder.org
forked from loveice622's block: assignment_graphic
<!DOCTYPE html> | |
<head> | |
<meta charset="utf-8"> | |
<script src="https://d3js.org/d3.v4.min.js"></script> | |
<style> | |
body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; } | |
</style> | |
</head> | |
<body> | |
<script> | |
// Feel free to change or delete any of the code you see in this editor! | |
var svg = d3.select("body").append("svg") | |
.attr("width", 960) | |
.attr("height", 600) | |
svg.append("text") | |
.text("Rectangle, line, curve, circle") | |
.attr("y", 20) | |
.attr("x", 20) | |
.attr("font-size", 20) | |
.attr("font-family", "monospace") | |
svg.append('rect') | |
.attr("y", 50) | |
.attr("x", 200) | |
.attr("width", 200) | |
.attr("height", 200) | |
.attr("fill", "blue") | |
.attr("stroke", "black") | |
.attr("stroke-width", 5) | |
.attr("fill-opacity", 0.1) | |
.attr("stroke-opacity", 0.9) | |
var c1_y=120, c1_x=340,c2_y=150, c2_x=250 | |
svg.append('line') | |
.attr("x1", c2_x) | |
.attr("y1", c2_y) | |
.attr("x2", 200) | |
.attr("y2", c2_y) | |
.attr("stroke-width", 1) | |
.attr("stroke", "grey") | |
svg.append('line') | |
.attr("x1", c2_x) | |
.attr("y1", c2_y) | |
.attr("x2", c2_x) | |
.attr("y2", 50+200) | |
.attr("stroke-width", 1) | |
.attr("stroke", "grey") | |
svg.append('line') | |
.attr("x1", c1_x) | |
.attr("y1", c1_y) | |
.attr("x2", 200) | |
.attr("y2", c1_y) | |
.attr("stroke-width", 1) | |
.attr("stroke", "grey") | |
svg.append('line') | |
.attr("x1", c1_x) | |
.attr("y1", c1_y) | |
.attr("x2", c1_x) | |
.attr("y2", 50+200) | |
.attr("stroke-width", 1) | |
.attr("stroke", "grey") | |
svg.append('circle') | |
.attr("cy", c1_y) | |
.attr("cx", c1_x) | |
.attr("r", 5) | |
.attr("fill", "black") | |
svg.append('circle') | |
.attr("cy", c2_y) | |
.attr("cx", c2_x) | |
.attr("r", 5) | |
.attr("fill", "black") | |
svg.selectAll('path').data(d3.schemeCategory20) | |
.enter().append('path') | |
.attr("d", "M 100 480 C 120 380 200 380 200 300") | |
.attr("fill", "none") | |
.attr("stroke-width", 8) | |
.attr("stroke", d => d) | |
.attr("transform", (d, i) => `translate(${i * 23})`); | |
</script> | |
</body> |