D3
OG
Old school D3 from simpler times
All examples
By author
By category
About
romsson
Full window
Github gist
Drawing rectangles d3.v4
Built with
blockbuilder.org
<!DOCTYPE html> <meta charset="utf-8"> <style> svg { float: left; border-bottom: solid 1px #ccc; border-right: solid 1px #ccc; margin-right: -1px; margin-bottom: -1px; } rect { opacity: 0.2; } </style> <body> <script src="//d3js.org/d3.v4.min.js"></script> <script> var width = 800, height = 600; var svg = d3.select("body").append("svg") .attr("width", width) .attr("height", height) .on("mousedown", mousedown) .on("mouseup", mouseup); function mousedown() { var m = d3.mouse(this); rect = svg.append("rect") .attr("x", m[0]) .attr("y", m[1]) .attr("height", 0) .attr("width", 0); svg.on("mousemove", mousemove); } function mousemove(d) { var m = d3.mouse(this); rect.attr("width", Math.max(0, m[0] - +rect.attr("x"))) .attr("height", Math.max(0, m[1] - +rect.attr("y"))); } function mouseup() { svg.on("mousemove", null); } </script>
https://d3js.org/d3.v4.min.js