如何将圆圈追加到从底部开始的行上？

Question

我正在试图创建10x10行中的圆圈框。所述第一层是灰色圆圈中的哪一个优良但粉红圈的第二层应在如下面的图像的底部：

但我只能从像这样的顶部开始的圆圈：

完整代码（plunker）：

---

var circle = svgContainer 
      .selectAll('path') 
      .data(function() { 
      var data = [] 
      for (var i = 0; i < 100; i++) { 
       data.push(i) 
      } 
      return data 
      }) 
      .enter() 

     var circleAppend = circle 
      .append("circle") 
      .style("stroke", "#fff") 
      .style("fill", function(d) { 
      return '#95a6b3'; 
      }) 
      .attr("cx", function(d, i) { 
      return i % 10 * rectWidth/15 + 15 
      }) 
      .attr("cy", function(d, i) { 
      return Math.floor(i/10) % 10 * rectWidth/15 + 20 
      }) 
      .attr("r", '0.4em'); 

     var arr = []; 
     for (var i = 0; i < data.data; i++) { 
      arr.push(1) 
     } 




     var circle2 = svgContainer 
      .selectAll('path') 
      .data(arr) 
      .enter() 


     var circle2Append = circle2 
      .append('circle') 
      .attr('class', 'circle2') 
      .style("fill", function(d, i) { 
      return '#dc0f6e'; 
      }) 
      .attr("cx", function(d, i) { 
      return i % 10 * rectWidth/15 + 15 
      }) 
      .attr("cy", function(d, i) { 
      return Math.floor(i/10) % 10 * rectWidth/15 + 20 
      }) 
      .attr("r", '0.4em'); 

Answer 1

你不需要为界两个“输入”选项。追加100圈的单个选择，并且使用索引来设置颜色：

.style("fill", function(d, i) { 
    return i > limit ? '#dc0f6e' : '#95a6b3'; 
}) 

在此，例如，限制为第68循环：

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

 
var limit = 67; 
 

 
var circles = svg.selectAll("foo") 
 
    .data(d3.range(100)) 
 
    .enter() 
 
    .append("circle") 
 
    .style("stroke", "#fff") 
 
    .style("fill", function(d, i) { 
 
     return i > limit ? '#dc0f6e' : '#95a6b3'; 
 
    }) 
 
    .attr("cx", function(d, i) { 
 
     return i % 10 * 20 + 20 
 
    }) 
 
    .attr("cy", function(d, i) { 
 
     return Math.floor(i/10) % 10 * 20 + 20 
 
    }) 
 
    .attr("r", '0.4em');

<script src="https://d3js.org/d3.v4.min.js"></script>