Question

我有一个SVG画布，我希望能够点击点并绘制一个多边形。我有以下代码：

import graphlab
import math

sf = graphlab.SFrame({'a': [1, 2, 3]})
sf['b'] = sf['a'].apply(lambda x: math.log(x))

标有“This LINE”的行给我正确的x和y坐标，但格式为“21,50,60,70,90,100”。我需要的是将数组中的坐标添加为诸如“21,50 60,70 90,100”之类的集合。关于如何删除每个坐标之间的逗号的任何想法？

奖励：谁能告诉我这条线的确切含义？

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

        }            

    }

我发现它是一个建议，使用数组值作为函数的参数，但我不完全理解它是如何工作的。我甚至在声明函数之前使用“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>

d3 Javascript - 绘制多边形

1 个答案: