Javascript 在D3中绘制多边形数据的正确格式

我尝试过不同的方法，但似乎没有任何效果。以下是我目前拥有的：

var vis = d3.select("#chart").append("svg")
         .attr("width", 1000)
         .attr("height", 667),

 scaleX = d3.scale.linear()
        .domain([-30,30])
        .range([0,600]),

scaleY = d3.scale.linear()
        .domain([0,50])
        .range([500,0]),

poly = [{"x":0, "y":25},
        {"x":8.5,"y":23.4},
        {"x":13.0,"y":21.0},
        {"x":19.0,"y":15.5}];

vis.selectAll("polygon")
    .data(poly)
    .enter()
    .append("polygon")
    .attr("points",function(d) { 
        return [scaleX(d.x),scaleY(d.y)].join(",")})
    .attr("stroke","black")
    .attr("stroke-width",2);

我假设这里的问题要么与我将点数据定义为单个点对象数组的方式有关，要么与我如何为

.attr（“points”）编写函数有关

我一直在网上寻找关于如何绘制简单多边形的教程或示例，但我似乎找不到它。
您正在尝试绘制多边形形状吗？-像这样。代码的开头看起来像一个典型的图表-通常会得出这样的结论

chart.selectAll("line")
     .data(x.ticks(10))
   .enter().append("line")
     .attr("x1", x)
     .attr("x2", x)
     .attr("y1", 0)
     .attr("y2", 120)
.style("stroke", "#ccc");

多边形看起来像：

因此，完整多边形数组应该生成一个长字符串，该字符串将创建一个多边形。因为我们讨论的是一个多边形，所以数据连接也应该是一个只有一个元素的数组。这就是为什么下面的代码显示：
数据（[poly]）
如果您想要两个相同的多边形，可以将其更改为
数据（[poly，poly]）

目标是从包含4个对象的数组中创建一个字符串。我使用了一个
map
和另一个
join
来实现此目的：

poly = [{"x":0.0, "y":25.0},
        {"x":8.5,"y":23.4},
        {"x":13.0,"y":21.0},
        {"x":19.0,"y":15.5}];

vis.selectAll("polygon")
    .data([poly])
  .enter().append("polygon")
    .attr("points",function(d) { 
        return d.map(function(d) {
            return [scaleX(d.x),scaleY(d.y)].join(",");
        }).join(" ");
    })
    .attr("stroke","black")
    .attr("stroke-width",2);

参见工作小提琴：
以上答案不必要地复杂

你所要做的就是把这些点指定为一个字符串，一切都很好

var canvas = d3.select("body")
   .append("svg")
   .attr("height", 600)
   .attr("width", 600);

canvas.append("polygon")
   .attr("points", "200,10 250,190 160,210")
   .style("fill", "green")
   .style("stroke", "black")
   .style("strokeWidth", "10px");

谢谢！我需要研究它，但显然这个解决方案是有效的。你认为这是做多边形的最好方法吗？在函数构造中使用该函数让我觉得有点笨拙。但也许这就是它需要的方式？我想我的问题是，我应该用这种方式构造数据对象，还是有更好/更干净的方法o这样做。给你一些更多的想法：如果原始数据是一个二维数组，具有缩放数据点，如[[x1，y1]，[x2，y2]，[x3，y3]]，那么点函数会简单得多：函数（d）{return d.join（“”；}。这取决于Javascript对数组的默认字符串是用逗号连接它们的事实。例如console.log（“+[0,1,2]）；将打印“0,1,2”。另请参见D3小组讨论：nautat，这正是我所希望的。谢谢大家！这不是多边形，而是连接线。