d3如何每行渲染15个圆圈

【问题标题】：d3 how to render 15 circles every lined3如何每行渲染15个圆圈
【发布时间】：2016-06-24 23:37:12
【问题描述】：

我有一个数据集，每个值包含 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

【问题讨论】：

标签： javascript d3.js

【解决方案1】：

您可以使用modulus 运算符：

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

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

检查小提琴：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...

【讨论】：