Question

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

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

所以基本上，我有每个矩形的端点，但是传统的D3使用x，y，height和width附加rects - 所有这些都需要我相信。如果我没有弄错的话，x1，x2，y1，y2不适用于rects。所以我对采取哪种方法感到有些困惑。

我原本以为一条线或路径可以做到这一点，但我不认为我可以用这种方式创建不同的形状和不同的填充，因为它们都将被一举绘制。

请告知哪种方法最适合此数据类型。

Answer 1

由于width只是x2 - x1而height只是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>元素来模拟您的CSV，而且我还在增加您的值，以便更好地查看矩形）：

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>

请注意，您必须确保y2大于y1且x2大于x1。否则您将收到错误：A negative value is not valid.

D3从坐标数据绘制矩形

1 个答案: