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

        }            

    }

标有“ 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>