D3 Plotting Rectangles from Coordinate data - d3.js

Question

I have rectangles that I would like to plot from a csv file in the following format:
x1,x2,y1,y2,color
2,4,5,8,blue
4,7,9,11,red
...
So basically, I have the endpoints for each rectangle, however conventional D3 appends rects using x, y, height and width -- all of which are needed I believe. x1, x2, y1, y2 don't apply to rects if I'm not mistaken. So I'm a little confused about which approach to take.
I originally thought a line or path could do the trick, but I do not think I can create distinct shapes and distinct fills this way, as they would all be drawn in one fell swoop.
Please advise as to which methods would be most suitable for this data type.

Answer 1

Since width is just x2 - x1 and height is just y2 - y1:
rectangleSelection.attr("x", function(d) {
return d.x1
})
.attr("y", function(d) {
return d.y1
})
.attr("width", function(d) {
return d.x2 - d.x1
})
.attr("height", function(d) {
return d.y2 - d.y1
})
.attr("fill", function(d) {
return d.color
})
Here is a demo (I'm using a <pre> element to simulate your CSV, and also I'm increasing your values for better see the rectangles):
var svg = d3.select("svg");
var data = d3.csvParse(d3.select("#csv").text())
var rects = svg.selectAll("foo")
.data(data)
.enter()
.append("rect");
rects.attr("x", function(d) {
return d.x1
})
.attr("y", function(d) {
return d.y1
})
.attr("width", function(d) {
return d.x2 - d.x1
})
.attr("height", function(d) {
return d.y2 - d.y1
})
.attr("fill", function(d) {
return d.color
})
pre{
display: none;
}
<script src="https://d3js.org/d3.v4.min.js"></script>
<pre id="csv">x1,x2,y1,y2,color
20,40,50,80,blue
40,70,90,110,red
70,130,60,80,green</pre>
<svg></svg>
Have in mind that you have to be sure that y2 is greater than y1 and x2 is greater than x1. Otherwise you'll get an error: A negative value is not valid.