如何在D3.js中绘制一个只有2个坐标的矩形

Question

我正在学习D3.js并将用它来绘制简单的线条和矩形。我的问题是，我使用的是用于RPG的数据。因此对于矩形RPG，只需要2个点，它将使用该对角线来完成矩形。我没有高度或宽度只有2个坐标。有没有办法在D3中只使用2个点绘制一个矩形？

Answer 1

由于你有两个点（坐标），任务很简单：

对于x和y位置，请使用第一点。对于矩形的width和height，只需分别计算x2 - x1和y2 - y1。

这是一个有三个矩形的演示。在数据数组中，每个对象有4个属性，对应于这两个点（这只是一个示例，您可以根据您的数据结构更改代码）：

var svg = d3.select("body")
	.append("svg")
	.attr("width", 400)
	.attr("height", 200);
	
var data = [{x1: 20, x2: 60, y1: 30, y2: 50},
{x1: 50, x2: 80, y1: 100, y2: 150},
{x1: 200, x2: 400, y1: 10, y2: 100}];

var rects = svg.selectAll("foo")
	.data(data)
	.enter()
	.append("rect")
	.attr("x", d=> d.x1)
	.attr("y", d=> d.y1)
	.attr("width", d=> d.x2 - d.x1)
	.attr("height", d=> d.y2 - d.y1)
	.attr("fill", "teal");

<script src="https://d3js.org/d3.v4.min.js"></script>

这是相同的原则，但是数据包含两个数组，第一个数组是第一个数据点，第二个数组是第二个数据点：

var svg = d3.select("body")
	.append("svg")
	.attr("width", 400)
	.attr("height", 200);
	
var data = [[[20,30],[40,50]], [[50,100],[80,150]], [[200,30],[400,100]]];

var rects = svg.selectAll("foo")
	.data(data)
	.enter()
	.append("rect")
	.attr("x", d=> d[0][0])
	.attr("y", d=> d[0][1])
	.attr("width", d=> d[1][0] - d[0][0])
	.attr("height", d=> d[1][1] - d[0][1])
	.attr("fill", "teal");

<script src="https://d3js.org/d3.v4.min.js"></script>

要使上述片段起作用，数据必须具有此序列中的坐标：首先是左上角点，然后是右下角点。当然，如果订单不正确，您可以编写一个函数来检查这个并交换点。

要绘制对角线，只需选择您想要的点。例如，从左上角到右下角：

var svg = d3.select("body")
	.append("svg")
	.attr("width", 400)
	.attr("height", 200);
	
var data = [{x1: 20, x2: 60, y1: 30, y2: 50},
{x1: 50, x2: 80, y1: 100, y2: 150},
{x1: 200, x2: 400, y1: 10, y2: 100}];

var rects = svg.selectAll("foo")
	.data(data)
	.enter()
	.append("rect")
	.attr("x", d=> d.x1)
	.attr("y", d=> d.y1)
	.attr("width", d=> d.x2 - d.x1)
	.attr("height", d=> d.y2 - d.y1)
	.attr("fill", "teal")
	.attr("opacity", 0.3);
  
var lines = svg.selectAll("foo")
	.data(data)
	.enter()
	.append("line")
	.attr("x1", d=> d.x1)
	.attr("y1", d=> d.y1)
	.attr("x2", d=> d.x2)
	.attr("y2", d=> d.y2)
	.attr("stroke", "firebrick")
	.attr("stroke-width", 2);

<script src="https://d3js.org/d3.v4.min.js"></script>