D3.js D3根据坐标数据绘制矩形

我想从csv文件中绘制以下格式的矩形：

x1,x2,y1,y2,color
2,4,5,8,blue
4,7,9,11,red
...

所以基本上，我有每个矩形的端点，但是传统的D3使用

x

，

y

，

高度和
宽度来附加矩形，我相信所有这些都是需要的<如果我没有弄错的话，code>x1
，
x2
，
y1
，
y2
不适用于RECT。所以我有点困惑该采取哪种方法

我原本以为一条线或一条路可以做到这一点，但我不认为我可以通过这种方式创建不同的形状和不同的填充，因为它们都是一次性绘制的

请告知哪些方法最适合此数据类型。
，因为
宽度
仅为
x2-x1
，
高度
仅为
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
    })

这是一个演示（我使用的是

pre{
显示：无；
}

x1，x2，y1，y2，彩色
20,40,50,80，蓝色
40,70,90110，红色
70130,60,80，绿色
你可以从x1，y1，y1，y2计算x，y，宽度和高度，不是吗？@RobertLongson我想我可以，我不能跳出框框思考：（。我想我会那样做。如果有其他优雅的方式，那么我就不提这个问题。@ArashHowaida“优雅”基本上是基于观点的。我想你是在要求一种工作方式，不管这种方式是什么……我相信
d.y2
是我们想要的，这使情节锚定正确。我尝试了
d.y1
，这导致了重叠和缺失间隙。我也相信
Math.abs（）
for width/height可以使绘图对具有负值的域具有鲁棒性。但我知道您已经尽了最大努力，更不用说您没有访问我的数据集的权限了。