I have a basic map here, with dummy data. Basically a bubble map.
The problem is I have multiple dots (ex:20) with exact same GPS coordinates. The following image is my csv with dummy data, color blue highlight overlapping dots in this basic example. Thats because many compagny have the same city gps coordinates.

Here is a fiddle with the code I'm working on :
https://jsfiddle.net/MathiasLauber/bckg8es4/45/ Many research later, I found that d3.js add this force simulation fonction, that avoid dots from colliding.

// Avoiding bubbles overlapping
    var simulationforce = d3.forceSimulation(data)

      .force('x', d3.forceX().x(d => xScale(d.longitude)))
      .force('y', d3.forceY().y(d => yScale(d.latitude)))
      .force('collide', d3.forceCollide().radius(function(d) {
        return d.radius   10
      }))
  simulationforce
    .nodes(cities)
    .on("tick", function(d){
      node
       .attr("cx", function(d) { return projection.latLngToLayerPoint([d.latitude, d.longitude]).x;                 })
        .attr("cy", function(d) {return projection.latLngToLayerPoint([d.latitude, d.longitude]).y;                     })
    });

The problem is I can't make force layout work and my dots are still on top of each other. (lines: 188-200 in the fiddle).

If you have any tips, suggestions, or if you notice basic errors in my code, just let me know =D

Bunch of code close to what i'm trying to achieve
https://d3-graph-gallery.com/graph/circularpacking_group.html
https://jsbin.com/taqewaw/edit?html,output

CodePudding user response：

There are 3 problems:

1. For positioning the circles near their original position, the x and y initial positions need to be specified in the data passed to simulation.nodes() call.
2. When doing a force simulation, you need to provide the selection to be simulated in the on tick callback (see node in the on('tick') callback function).
3. The simulation needs to use the previous d.x and d.y values as calculated by the simulation

Relevant code snippets below

// 1. Add x and y (cx, cy) to each row (circle) in data 
const citiesWithCenter = cities.map(c => ({
  ...c,
  x: projection.latLngToLayerPoint([c.latitude, c.longitude]).x,
  y: projection.latLngToLayerPoint([c.latitude, c.longitude]).y,
}))
// citiesWithCenter will be passed to selectAll('circle').data()

// 2. node selection you forgot
 const node = selection
        .selectAll('circle')
        .data(citiesWithcenter)
        .enter()
        .append('circle')
...
// let used in simulation
 simulationforce.nodes(citiesWithcenter).on('tick', function (d) {
   node
     .attr('cx', function (d) {
            // 3. use previously computed x value 
            // on the first tick run, the values in citiesWithCenter is used
            return d.x
          })
     .attr('cy', function (d) {
            // 3. use previously computed y value 
            // on the first tick run, the values in citiesWithCenter is used
            return d.y
          })
})

Full working demo here: https://jsfiddle.net/b2Lhfuw5/