javascript - d3 如何每行渲染 15 个圆圈

Question

我有一个包含 250 个值的数据集，每个值我想为每个数据值渲染一个圆圈，但在每第 15 个圆圈之后我切换到下一行并从那里开始渲染。我怎样才能做到这一点？所有的圆必须具有相同的半径 3. 我的代码:

var svg = d3.select('#dots')

var dataSet = [];

var initialValue = 259



for(var i=0; i<=initialValue; i++){
dataSet.push(i)
}

var circle = svg.selectAll('circle')
    .data(dataSet)
    .enter()
    .append('circle')
    .attr({
        r: 3,
        cx:function(d, i){
        if(i<=15){
        return i*10+10
        } 
        },
        cy: function(d, i){
        if ( i<=15) {
        return 20
        } else  {
        return 30
        }
        },
        fill: 'red'
    });

jsfiddle

Answer 1

您可以使用 modulus运算符(operator):

.attr({
    r: 3,
    cx:function(d, i){
    return 30 + (i%15)*10

    },
    cy: function(d, i){
    return 10 - ((i%15)-i)
    },
    fill: 'red'
});

检查 fiddle :http://jsfiddle.net/gerardofurtado/pL187dc0/

使用模数的逻辑是每15的倍数结果都会回到0。比如这段代码:

var i = -1;
while (i++ < 200) console.log(i%15);

会在控制台生成:

0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10,
11, 12, 13, 14, 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 0, 1, 2, 3, 4, 5, 
6, 7, 8, 9, 10, 11, 12, 13, 14...