Я новичок во вселенной d3 Js, я создал точечный график с json, но некоторые точки имеют одинаковое положение, и я хотел бы разместить их рядом. Я пытался использовать силовое столкновение с имитацией силы, но ничего не произошло. Я следовал многим примерам рассеяния с коллизиями обнаружение коллизий
function constructScatterPoint(){
svg = d3.select("#graphDiv").append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
svg.append("g").attr("class", "x axis").attr("transform", "translate(0," + height + ")").call(d3.axisBottom(xScale)).append("text")
.attr("class", "label")
.attr("x", width)
.attr("y", -6)
.style("text-anchor", "end")
.text("Periode")
.attr("stroke","black");
svg.append("g").call(d3.axisLeft(yScale)).append("text")
.attr("class", "label")
.attr("x", 0)
.attr("y", -6)
.text("Durée")
.attr("stroke","black");
const forceX = d3.forceX(width / 2).strength(0.015)
const forceY = d3.forceY(height / 2).strength(0.015)
var force = d3.forceSimulation()
.velocityDecay(0.2)
.force("x", forceX)
.force("y", forceY)
.force("collide", d3.forceCollide().radius(function(d){
return 5 + 0.5;
}).iterations(5))
.nodes(data).on("tick", tickActions);
maintenanceTaskDot=svg.selectAll("dot").data(data).enter().append("circle")
.attr("stroke", "var(--greydark)")
.attr("stroke-width", 1.5)
.attr("r", 5)
.attr("fill", function(d){ if(d.maintenance_work=="A") {return "var(--purple)"}else if(d.maintenance_work=="H"){return "var(--pink)"}return "var(--cyan)"} )
.style("opacity",0.5)
.on('mouseover', showTaskCode.show)
.on('mouseout',showTaskCode.hide)
.on("click", clickOnCircle)
function tickActions(e) {
svg.selectAll("circle")
.attr("cx", xValue)
.attr("cy", yValue)
}
}