如何將圓圈追加到從底部開始的行上？

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>