在绘制svg rect的行中删除幻数

Question

我有一个SVG元素，正在绘制设置大小的矩形。我计算最大列max_cols和所需行min_rows以匹配数据集。当我到达SVG canvas 的末尾时，我开始一个新行，但是我计算y坐标的算法使用了幻数。我怎么能摆脱它？ 以下是我的（D3.js）代码的相关块：

var rw = 17; // rect width
var rh = 17; // rect height
var rm = 2;  // rect margin
var min_rows = Math.ceil(c * (rw + rm) / w );
var max_cols = ( Math.ceil(w / (rh + rm)) ) - 2;

...

.attr('x', function(d, i) {
    var rem = i % max_cols;
    if (i < max_cols){
        return i * (rw + rm);                    
    } else {
        return rem * (rw + rm);
    }
})
.attr('y', function(d, i) {
    if (i < max_cols){
        return rh + rm;                    
    } else if (i < max_cols * 2) {
        return 2 * (rh + rm);
    } else if (i < max_cols * 3){
        return 3 * (rh + rm);
    } else {
        return 4 * (rh + rm);
    }
})

...

如果这有帮助，这里有视觉结果：

Answer 1

我会这样做：

        var width = 323,
          height = 400,
          rw = 17,
          rh = 17,
          rm = 2,
          num_cols = parseInt(width / (rw + rm)),

          data = [
            "#800", "#800", "#800", "#800", "#800", "#800", "#800",
            "#800", "#800", "#800", "#800", "#800", "#800", "#800",
            "#800", "#800", "#800", "#800", "#800", "#800", "#800",
            "#800", "#800", "#800", "#800", "#800", "#800", "#800",
            "#800", "#800", "#800", "#008", "#008", "#008", "#008",
            "#008", "#008", "#008", "#008", "#008", "#008", "#008",
            "#008", "#008", "#008", "#008", "#008", "#008", "#008",
            "#008", "#008", "#008", "#008", "#880", "#880", "#880",
            "#800", "#800", "#800", "#800", "#800", "#800", "#800",
            "#800", "#800", "#800", "#008", "#008", "#008", "#008",
            "#800", "#800", "#800", "#800", "#800", "#800", "#800",
            "#800", "#800", "#800", "#008", "#008", "#008", "#008",
            "#008", "#008", "#008", "#008", "#008", "#008", "#008",
            "#008", "#008", "#008", "#008", "#008", "#008", "#008",
            "#008", "#008", "#008", "#008", "#880", "#880", "#880",
            "#800", "#800", "#800", "#800", "#800", "#800", "#800",
            "#800", "#800", "#800", "#008", "#008", "#008", "#008",
            "#008", "#008", "#008", "#008", "#008", "#008", "#008",
            "#008", "#008", "#008", "#008", "#008", "#008", "#008",
            "#008", "#008", "#008", "#008", "#880", "#880", "#880",
            "#888", "#888", "#080", "#880", "#880", "#880", "#880",
            "#880", "#880", "#880", "#880", "#880",
          ];

        var svg = d3.select("#vis").append("svg")
          .attr("width", width)
          .attr("height", height);

        var rects = d3.select("svg").selectAll("rect")
          .data(data)
          .enter().append("rect")
          .attr("width", rw)
          .attr("height", rh)
          .attr("x", function(d, i) {
            return (i % num_cols) * (rw + rm);
          }).attr("y", function(d, i) {
            return parseInt(i / num_cols) * (rh + rm);
          }).style("fill", function(d) {
            return d;
          });

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<div id="vis"></div>

基本上，y位置只是parseInt(i * (rh + rm) / num_cols)而x位置只是(i % num_cols) * (rw + rm);