How to use d3-quadtree - 9 common examples

[35, 60],
    [70, 20]
];

// ---------------------------------------------------------------------------
// Quadtree
// ---------------------------------------------------------------------------

// Create Quadtree ===========================================================

// with default data type [number, number] -----------------------------------

let defaultQuadtree: d3Quadtree.Quadtree<[number, number]>;

// test with data passed in right away
defaultQuadtree = d3Quadtree.quadtree(simpleTestData);

// test without data
defaultQuadtree = d3Quadtree.quadtree();

// with custom data type -----------------------------------------------------

let quadtree: d3Quadtree.Quadtree;

// test with data passed in right away
quadtree = d3Quadtree.quadtree(testData); // inferred type underlying quadtree TestDatum
quadtree = d3Quadtree.quadtree(testData); // explicitly typed to TestDatum

// test with data AND accessors passed in right away
quadtree = d3Quadtree.quadtree(
    testData, // data type Array
    d => d.x, // x accessor with d of type TestDatum

let defaultQuadtree: d3Quadtree.Quadtree<[number, number]>;

// test with data passed in right away
defaultQuadtree = d3Quadtree.quadtree(simpleTestData);

// test without data
defaultQuadtree = d3Quadtree.quadtree();

// with custom data type -----------------------------------------------------

let quadtree: d3Quadtree.Quadtree;

// test with data passed in right away
quadtree = d3Quadtree.quadtree(testData); // inferred type underlying quadtree TestDatum
quadtree = d3Quadtree.quadtree(testData); // explicitly typed to TestDatum

// test with data AND accessors passed in right away
quadtree = d3Quadtree.quadtree(
    testData, // data type Array
    function (d) { return d.x; }, // x accessor with d of type TestDatum
    function (d) { return d.y; } // y accessor with d of type TestDatum
); // inferred type underlying quadtree TestDatum

quadtree = d3Quadtree.quadtree(testData); // explicitly typed to TestDatum

// test without data
quadtree = d3Quadtree.quadtree();
// quadtree = d3Quadtree.quadtree(); fails, wrong underlying data type


// Configure Quadtree ========================================================

link.source.vx += dx / d * sourceAcceleration;
        link.target.vx -= dx / d * targetAcceleration;
        if (nDim > 1) {
          link.source.vy += dy / d * sourceAcceleration;
          link.target.vy -= dy / d * targetAcceleration;
        }
        if (nDim > 2) {
          link.source.vz += dz / d * sourceAcceleration;
          link.target.vz -= dz / d * targetAcceleration;
        }
      }
    } else { // Assume full node mesh if no links specified
      const tree =
          (nDim === 1 ? binarytree(nodes, d => d.x)
          :(nDim === 2 ? quadtree(nodes, d => d.x, d => d.y)
          :(nDim === 3 ? octree(nodes, d => d.x, d => d.y, d => d.z)
          :null
        ))).visitAfter(accumulate);

      const etherStrength = alpha * strength();

      for (let i = 0; i < nodes.length; i++) {
        const node = nodes[i],
          nodeQ = charge(node);
        tree.visit((treeNode, x1, arg1, arg2, arg3) => {
          if (!treeNode.value) return true;
          const x2 = [arg1, arg2, arg3][nDim-1];

          const dx = treeNode.x - node.x,
            dy = (treeNode.y - node.y) || 0,
            dz = (treeNode.z - node.z) || 0,

function force(_) {
    var i, n = nodes.length;
    if (!tree || updateBH(iter, nodes)) {
      tree = quadtree(nodes, x, y).visitAfter(accumulate);
      nodes.update.push(iter);
    }
    for (alpha = _, i = 0; i < n; ++i) node = nodes[i], tree.visit(apply);
    ++iter;
  }

function force() {
    var i, n = nodes.length,
        tree,
        node,
        xi,
        yi,
        ri,
        ri2;

    for (var k = 0; k < iterations; ++k) {
      tree = quadtree(nodes, x, y).visitAfter(prepare);
      for (i = 0; i < n; ++i) {
        node = nodes[i];
        ri = radii[node.index], ri2 = ri * ri;
        xi = node.x + node.vx;
        yi = node.y + node.vy;
        tree.visit(apply);
      }
    }

    function apply(quad, x0, y0, x1, y1) {
      var data = quad.data, rj = quad.r, r = ri + rj;
      if (data) {
        if (data.index > node.index) {
          var x = xi - data.x - data.vx,
              y = yi - data.y - data.vy,
              l = x * x + y * y;

super(svg);
    this.canvas = select(this.svg)
      .classed("scatterplot", true)
      .append("g");
    this.margin.left = 70;

    this.x = scaleUtc();
    this.y = scalePoint().padding(1);

    this.xAxis = axisBottom(this.x).tickSizeOuter(0);

    this.yAxis = axisLeft(this.y)
      .tickPadding(6)
      .tickFormat(d => d);
    this.data = [];
    this.quadtree = quadtree();

    this.xAxisSelection = this.canvas.append("g").attr("class", "x axis");
    this.yAxisSelection = this.canvas.append("g").attr("class", "y axis");
    this.dots = this.canvas.selectAll(".dot");
  }

this.canvas.attr(
      "transform",
      `translate(${this.margin.left},${this.margin.top})`
    );

    this.yAxis.tickSize(-this.width, 0);
    this.selections.xAxis.attr("transform", `translate(0,${this.height})`);

    this.selections.xAxis.call(this.xAxis);
    this.selections.yAxis.call(this.yAxis);
    this.selections.dots
      .attr("cx", d => this.x(d.date))
      .attr("cy", d => this.y(d.type));

    this.quadtree = quadtree(
      this.data,
      d => this.x(d.date),
      d => this.y(d.type)
    );
  }
}

this.canvas.attr(
      "transform",
      `translate(${this.margin.left},${this.margin.top})`
    );

    this.yAxis.tickSize(-this.width, 0);
    this.selections.xAxis.attr("transform", `translate(0,${this.height})`);

    this.selections.xAxis.call(this.xAxis);
    this.selections.yAxis.call(this.yAxis);
    this.selections.dots
      .attr("cx", d => this.x(d.date))
      .attr("cy", d => this.y(d.value));
    this.selections.lines.attr("d", d => this.line(d.values));

    this.quadtree = quadtree(
      merge(this.data.map(d => d.values)),
      d => this.x(d.date),
      d => this.y(d.value)
    );

    this.legend = {
      domain: this.data.map(d => d.name),
      scale: scales.currencies,
    };
  }
}

this.xAxis = axisBottom(this.x).tickSizeOuter(0);

    this.yAxis = axisLeft(this.y)
      .tickPadding(6)
      .tickFormat(formatCurrencyShort);

    this.line = line()
      .x(d => this.x(d.date))
      .y(d => this.y(d.value));

    this.canvas = select(this.svg)
      .classed("linechart", true)
      .append("g");
    this.xAxisSelection = this.canvas.append("g").attr("class", "x axis");
    this.yAxisSelection = this.canvas.append("g").attr("class", "y axis");
    this.quadtree = quadtree();
    this.lines = this.canvas.selectAll(".line");
    this.dots = this.canvas.selectAll("g.dot").selectAll("circle");
  }