d3 Javascript - 繪製多邊形

Question

我有一個SVG畫布，我希望能夠點擊點並繪製多邊形。我有以下的代碼來做到這一點：

var clicks = []; 
    function polyClick(){ 

     var x = event.clientX; 
     var y = event.clientY; 
     var point = document.getElementById("num").value; 

     clicks.push.apply(clicks, [x,y]); 
     drawPoly(clicks) 
     function drawPoly(params){ 

     d3.select(".p").remove(); 
     mySVG.append("svg:polygon") 
     .style("fill", "red") 
     .style("stroke-width", "1") 
     .classed("p", true) 
     .attr("points", params + " "); //This LINE 

     }    

    } 

行標有「此行​​」給我正確的X和Y座標，但在「21,50,60,70,90,100」的格式。我需要的是陣列中的座標被添加爲諸如「21,50 60,70 90,100」之類的集合。任何想法如何去除每個座標之間的逗號？

獎金：有誰能告訴我這條線究竟做了什麼嗎？

drawPoly(clicks) 
function drawPoly(params) 

我發現它作爲一個建議，使用數組值作爲函數的參數，但我不完全理解如何工作。我甚至在函數被聲明之前使用「drawPoly」。

感謝您的幫助！

Answer 1

函數定義在編譯期間被處理，表達式（如函數調用）在執行過程中被處理。這就是爲什麼JavaScript函數定義和函數調用順序無關緊要的原因。

代碼說明：

function drawPoly(params){ 
    d3.select(".p").remove(); //'p' is the class name of polygon. This line deletes the polygon if exists. 
    mySVG.append("svg:polygon") //Appends a new polygon with the calculated position attributes. 
     .style("fill", "red") 
     .style("stroke-width", "1") 
     .classed("p", true) //Sets classname as p 
     .attr("points", params); 
}  

的代碼似乎與座標的當前格式進行工作。以下是工作代碼片段。

嘗試通過單擊超過3點作爲多邊形的座標。

var mySVG = d3.select("#container").append("svg").attr({ 
 
    width: 500, 
 
    height: 200 
 
}); 
 
mySVG.on('click', polyClick); 
 
var clicks = []; 
 

 
function polyClick() { 
 

 
    var x = event.clientX; 
 
    var y = event.clientY; 
 

 
    clicks.push.apply(clicks, [x, y]); 
 
    drawPoly(clicks) 
 

 
    function drawPoly(params) { 
 
    d3.select(".p").remove(); 
 
    mySVG.append("svg:polygon") 
 
     .style("fill", "red")  
 
     .style("stroke-width", "1") 
 
     .classed("p", true) 
 
     .attr("points", params + " "); 
 

 
    } 
 

 
}

svg { 
 
    background-color: black; 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script> 
 
<div id="container"> 
 
</div>