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>