d3 квадраты в сетке - PullRequest
Новая
       36

d3 квадраты в сетке

0 голосов
/ 21 мая 2018

Я пытаюсь понять квадратную сетку Майка Бостока: https://bl.ocks.org/mbostock/1009139

Я хочу знать, как он разместил ячейки, и я думаю, что следующая часть иллюстрирует это.Но я не могу понять, что это значит. 

.attr("x", function(i) {
        var x0 = Math.floor(i / 100) % 10, x1 = Math.floor(i % 10);
        return groupSpacing * x0 + (cellSpacing + cellSize) * (x1 + x0 * 10);
      })
.attr("y", function(i) {
        var y0 = Math.floor(i / 1000), y1 = Math.floor(i % 100 / 10);
        return groupSpacing * y0 + (cellSpacing + cellSize) * (y1 + y0 * 10);
      })

Не могли бы вы помочь мне понять эту часть?В основном, как установить расположение ячеек в сетке.В моем случае я хотел бы установить местоположение в зависимости от пропорции переменной в моих данных.Но некоторый общий смысл тоже будет очень полезен.

Кроме того, наиболее сложным является использование%.Кто-нибудь может дать мне знать, зачем это нужно?

Большое спасибо,

1 Ответ

0 голосов
/ 21 мая 2018

Давайте разберем это для x.Во-первых, i - это индекс ячейки.Он будет идти от 0 .. N, где N - количество ячеек минус 1. 

var x0 = Math.floor(i / 100) % 10

x0 - это позиция x, в которой находится группа 10x10, в которой находится ячейка. Поскольку каждая группа содержит 100 ячеек,это пол индекса, деленный на 100. Итак, подумайте о ячейке 201, это будет 2, что правильно.Вы должны работать по модулю (который возвращает остаток от деления), однако, для переноса после 10 групп.Подумайте о ячейке 2001, слово floor (2001/100) поместило бы в 20, поместите по модулю, хотя и это правильно 0 для позиции x. 

x1 = Math.floor(i % 10)

x1 - это позиция x в группе 10x10,Это пол остатка деления на 10. 10 - потому что у нас есть 10 столбцов в каждой группе.Опять же, если вы проверите наши тесты 201 и 2001 года, они оба окажутся правильно во втором столбце.

Наконец, общая позиция: 

groupSpacing * x0 + (cellSpacing + cellSize) * (x1 + x0 * 10);

, которая читается как (pixel group spacing * x0) + (pixel cell spacing + pixel cell size) * ((x0 * 10) + x1)

  1. интервал между пикселями для каждой группы
  2. размер ячейки и интервал для каждой ячейки
  3. x положение группы * 10 (потому что 10 столбцов в каждой группе)
  4. плюс позиция вкаждая группа
...