如何使用数组在 javascript 脚本中使用 D3.js 创建 SVG 多边形图表？

如何解决如何使用数组在 javascript 脚本中使用 D3.js 创建 SVG 多边形图表？

我在语法上很头疼。我试过几个教程，都没有效果。我不明白逻辑。请你能把我的微笑还给我吗？ :D

我正在使用 D3js 绘制多边形。

这很完美=>

svg.append('polygon')
    .attr("points","50,89,19,100,61,72,94,28,94")
    .attr("class","radar-area");

但在这里我必须手动写点（不断移动的...）

我将这些点收集在这样的数组中：

    var Data = [
        {"x":50,"y":0},{"x":89,"y":19},{"x":100,"y":61},{"x":72,"y":94},{"x":28,];

如何正确使用这个数组“Data”来设置多边形的点？

非常感谢您的帮助！

完整代码：

PHP 文档：

    <?PHP
    ob_start();
    require('view/resources/radar_chart.PHP');
    $radar_chart = ob_get_clean();
    ?>
/*and a bit further:*/
    <div class="radarchart"><?= $radar_chart ?></div>

JS 脚本（所需资源）：

<script src="//d3js.org/d3.v3.min.js"></script>
<script>
    var margin = {top:10,right:10,bottom:10,left:10},width = 120 - margin.left - margin.right,height = 120 - margin.top - margin.bottom;
    var svg = d3.select('.radarchart')
        .append('svg');
    svg.attr('width',width + margin.left + margin.right);
    svg.attr('height',height + margin.top + margin.bottom);

    var Data = [
        {"x":50,];
    /*In fact,this array is filled by variables,but useless to complexify with that here,so I replaced with figures*/

svg.append('polygon')
    .attr("points",""/*How do I get the points from "Data" ?*/)
    .attr("class","radar-area");

</script>

CSS 文件中的类“radar-area”：

.radar-area{
    fill: var(--theme-pink);
}

解决方法

小改动，因为你可以使用 ES 解构

还要注意 、 或 空格（或混合）都可以作为分隔符

var Data = [
        {"x":50,"y":0},{"x":89,"y":19},{"x":100,"y":61},{"x":72,"y":94},{"x":28,];
var points = Data.map(({x,y}) => x+","+y).join(",");

document.body.append(points)