Question

在下面的代码中，我希望为变量arr赋值。目前我通过引用points数组的每个索引手动完成它。有没有办法通过使用for循环或类似的东西在一个步骤中完成它。

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

var scren = [1, 2, 3, 1, 4, 5, 6, 4];
var maximum =d3.max(scren);

var points = d3.range(1, maximum).map(function(i) {
    return [i * 2000 / (maximum), 350];
});     

var arr = [
    {d: 'M ' + points[1][0] +' 350 A 10 10 0 1 0 '+ points[0][0]+' 350', stroke: 'green', 'strokewidth': 2, fill: 'none'},
    {d: 'M ' + points[2][0] +' 350 A 10 5 0 1 0 ' + points[1][0]+' 350', stroke: 'green', 'strokewidth': 2, fill: 'none'},
    // etc..
];

svg.selectAll('path')
    .data(arr)
    .enter()
    .append('path')
    .attr('d', function(d) {return d.d;})
    .attr('stroke', function(d) {return d.stroke;})
    .attr('stroke-width', function(d) {return d.strokewidth;})
    .attr('fill', function(d) {return d.fill;});

svg.selectAll("circle")
    .data(points)
    .enter()
    .append("circle")
    .attr("cx", function(d) {
        return d[0];
    })
    .attr("cy", function(d) {
        return d[1];
    })
    .attr("r", 5);

Answer 1

如果需要，可以执行for循环，并且可以使用数组的长度来设置循环的限制。我不确定你在points内有什么，但你可以这样做：

var arr = [];

for (i = 0; i < points.length - 1; i++) { 
    arr.push({d: 'M ' + points[i+1][0] +' 350 A 10 5 0 1 0 ' + points[i][0]+' 350', stroke: 'green', 'strokewidth': 2, fill: 'none'})
}

Answer 2

查看您拥有的示例arr，这应该有效：

var arr = [];

for(var i = 0; i < points.length; i++){
    arr.push({d: 'M ' + points[scren[i]][0] +' 350 A 10 10 0 1 0 '+ points[i][0]+' 350',
        stroke: 'green', 'strokewidth': 2, fill: 'none'});
}

我不太确定你在' 350 A 10 10 0 1 0 '的第4个值是哪里我还假设在第一个points[]中，你想要scren的内容，因为它们似乎匹配。

无论如何，这应该可以让您了解如何填充数组。

如何使用循环为D3中的数组赋值？

2 个答案: