D3 Examples - Drawing rectangles d3.v4

xxxxxxxxxx
 
<!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>
​
    