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

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

你不需要两个＆＃34;输入＆＃34;圈子的选择。附加100个圆圈的单个选择，并使用索引设置颜色：

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

例如，这里的限制是第68个圆圈：

＆＃13;

＆＃13;

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');

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;