title: How to draw a rectangle with d3.js based on 2 diametrical points and no length or height values?
body: <p>I want to add a rectangle in my <a href="https://d3js.org/" rel="nofollow noreferrer">d3.js</a> graph highlighting a specific data region. The problem is I don't want <a href="https://www.dashingd3js.com/svg-basic-shapes-and-d3js" rel="nofollow noreferrer">to specify a starting point and then a height and length</a>.</p>
  
  <p>Rather I would like to specify two points positioned diametral – on the upper left and lower right corner of the rectangle. The highlight area rectangle needs to go from my lowest X value to the highest X value in my dataset and from a specific lower y bound to a specific higher y bound.</p>
  
  <p><a href="https://i.stack.imgur.com/ZjHWc.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ZjHWc.png" alt="desired result"></a></p>