如何绘制一个矩形中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") 
 
\t .append("svg") 
 
\t .attr("width", 400) 
 
\t .attr("height", 200); 
 
\t 
 
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") 
 
\t .data(data) 
 
\t .enter() 
 
\t .append("rect") 
 
\t .attr("x", d=> d.x1) 
 
\t .attr("y", d=> d.y1) 
 
\t .attr("width", d=> d.x2 - d.x1) 
 
\t .attr("height", d=> d.y2 - d.y1) 
 
\t .attr("fill", "teal");

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

这里是相同的原理，但与含有两个阵列，第一阵列与所述第一点和所述第二阵列是所述第二点的数据：

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

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

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

对于两个以上片段的工作中，数据必须具有该序列中的坐标：第一左上点，则右边底部点。当然，你可以写一个函数来检查这一点，并交换点，如果顺序是不正确的。

用于绘制斜线，只要选择您想要的点数。例如，从左上角到右下角：

var svg = d3.select("body") 
 
\t .append("svg") 
 
\t .attr("width", 400) 
 
\t .attr("height", 200); 
 
\t 
 
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") 
 
\t .data(data) 
 
\t .enter() 
 
\t .append("rect") 
 
\t .attr("x", d=> d.x1) 
 
\t .attr("y", d=> d.y1) 
 
\t .attr("width", d=> d.x2 - d.x1) 
 
\t .attr("height", d=> d.y2 - d.y1) 
 
\t .attr("fill", "teal") 
 
\t .attr("opacity", 0.3); 
 
    
 
var lines = svg.selectAll("foo") 
 
\t .data(data) 
 
\t .enter() 
 
\t .append("line") 
 
\t .attr("x1", d=> d.x1) 
 
\t .attr("y1", d=> d.y1) 
 
\t .attr("x2", d=> d.x2) 
 
\t .attr("y2", d=> d.y2) 
 
\t .attr("stroke", "firebrick") 
 
\t .attr("stroke-width", 2);

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