Wie füge ich Kreise von unten in die Zeilen ein?

Question

Ich versuche, Felder mit Kreisen in einer Reihe von 10 x 10 zu erstellen. Die erste Schicht ist die grauen Kreise, die in Ordnung ist, aber die zweite Schicht aus rosaen Kreisen sollte wie das Bild unten am Boden sein:

aber ich kann die Kreise von oben nur beginnen, wie so :

vollständige Code (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

Sie brauchen nicht zwei "Enter" Auswahlen für die Kreise. Fügen Sie eine einfache Auswahl von 100 Kreisen, und verwenden Sie den Index der Farbe einzustellen:

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

Hier zum Beispiel, ist die Grenze der 68th Kreis:

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>