如何繪製一個矩形中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>