d3js quadtree с широтой / длиной - PullRequest
       59

d3js quadtree с широтой / длиной

0 голосов
/ 17 декабря 2018

Я следовал этому руководству по использованию структуры данных Quadtree для рисования на этой карте d3, которую я создавал.Учебник можно найти здесь: https://www.phase2technology.com/blog/using-d3-quadtrees-power-interactive-map-bonnier-corporation

По сути, я следовал этому учебнику, и это очень помогает.Мои данные не совсем совпадают с форматом данных, которые они используют в учебном пособии, и у меня возникают некоторые проблемы при попытке разобраться.

  let clusterPoints = [];
  let clusterRange = 45;

  // for this data structure,
  // we need to return an Array of Arrays! (important!)
  let latlongpoints = data.map(function(x) {
    let point = [
      x.LATITUDE,
      x.LONGITUDE
    ];
    return point;
  });

  console.log(latlongpoints); // should be array of arrays 

  let qTree = d3.quadtree()
      .addAll(latlongpoints); // adding points to quadtree

  console.log(qTree);

  console.log('before for loop');
  for (let a = 0; a <= width; a += clusterRange) {
    for (let b = 0; b <= height; b += clusterRange) {
      let searched = search(qTree, a, b, a + clusterRange, b + clusterRange);
      console.log(searched); // only (3) is working, what gives?

      let centerPoint = searched.reduce(function(prev, current) {
        return [prev[0] + current[0], prev[1] + current[1]];
      }, [0, 0]);

      centerPoint[0] = centerPoint[0] / searched.length;
      centerPoint[1] = centerPoint[1] / searched.length;
      centerPoint.push(searched);

      if (centerPoint[0] && centerPoint[1]) {
        clusterPoints.push(centerPoint);
      }
    }
  }

latlongpoints возвращает массивМассивы, которые содержат значения lat и long, вот так.

enter image description here Создается объект My QuadTree, который также содержит данные.

enter image description here Мои фактические функции поиска по дереву выглядят так:

// Find the nodes within the specified rectangle.
function search(quadtree, x0, y0, x3, y3) {
  let validData = [];
  quadtree.visit(function(node, x1, y1, x2, y2) {
    var p = node.data;
    if (p) {
      p.selected = (p[0] >= x0) && (p[0] < x3) && (p[1] >= y0) && (p[1] < y3);
      if (p.selected) {
        validData.push(p);
      }
    }
    return x1 >= x3 || y1 >= y3 || x2 < x0 || y2 < y0;
  });
  return validData;
}

Вывод моей консоли для переменной searched в цикле my for приводит к тому, что только (3) возвращаются любые данные, и яне уверен на 100% почему.Вот дамп данных.

enter image description here

Возможно, кто-то может подтолкнуть меня в правильном направлении относительно того, почему я получаю этот вывод.Если вы проверите статью, я, по сути, следую всем шагам.

Спасибо!

...