javascript - 如何将圆圈附加到从底部开始的行？

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>