问题描述
我在语法上很头疼。我试过几个教程,都没有效果。我不明白逻辑。请你能把我的微笑还给我吗? :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)