grid = { const GRID_SIZE = 60; const GRID_COLS = 9; const GRID_ROWS = Math.ceil(selectedData.length / GRID_COLS); let grid = { cells : [], init : function() { this.cells = []; for(var c = 0; c < GRID_COLS; c++) { for(var r = 0; r < GRID_ROWS; r++) { var cell; cell = { x : c * GRID_SIZE, y : r * GRID_SIZE, occupied : false }; this.cells.push(cell); }; }; }, sqdist : function(a, b) { return Math.pow(a.x - b.x, 2) + Math.pow(a.y - b.y, 2); }, occupyNearest : function(p) { var minDist = 1000000; var d; var candidate = null; for(var i = 0; i < this.cells.length; i++) { if(!this.cells[i].occupied && ( d = this.sqdist(p, this.cells[i])) < minDist) { minDist = d; candidate = this.cells[i]; } } if(candidate) candidate.occupied = true; return candidate; } } grid.init(); console.log(grid.cells); const nodes = selectedData.map(d => Object.create(d)); const simulation = d3.forceSimulation(nodes) .force("center", d3.forceCenter(width / 2, height / 2)) const svg = d3.select(DOM.svg(width, height)) .style("font", "10px sans-serif") .attr("text-anchor", "middle"); const node = svg.append("g") .attr("stroke", "#fff") .attr("stroke-width", 1.5) .selectAll("circle") .data(nodes) .join("circle") .attr("r", d=>d.Radius) .attr("opacity", 0.8) .attr("fill", d => d.ImmiOrNot ? 'LightSalmon' : 'MediumTurquoise') .call(drag(simulation)) .on('mouseover', d => tooltip.style("visibility", "visible").html(`

Company: ${d.Company}
Valuation: ${d.Valuation} Billion
Number of Employee: ${d.EmployeeNum}
Founder:

`) .attr("r", 50))//not working yet******************************************************************* .on("mousemove", // function (d, i) { // mutable hovering = selectedData[i].Company // d3.select(this) // .attr('opacity', 0.5) // .attr('r',50) // }) d => tooltip.style("top", (d3.event.pageY-10)+"px").style("left",(d3.event.pageX+10)+"px").html(`

Company: ${d.Company}
Valuation: ${d.Valuation} Billion
Number of Employee: ${d.EmployeeNum}
Founder:

`) .attr("r", 50))//not working yet******************************************************************* .on("mouseout", d => tooltip.style("visibility", "hidden").attr("r", d=>d.Valuation)); node.append("text") .attr("text-anchor", "middle") .attr("dy", ".3em") .attr("y", -5) .text(d => d.Company); simulation.on("tick", () => { grid.init(); node .each(function(d) { let gridpoint = grid.occupyNearest(d); if (gridpoint) { // ensures smooth movement towards final positoin d.x += (gridpoint.x - d.x) * .05; d.y += (gridpoint.y - d.y) * .05; // jumps directly into final position // d.x = gridpoint.x; // d.y = gridpoint.y } }) .attr("cx", d => d.x) .attr("cy", d => d.y); }); invalidation.then(() => simulation.stop()); return svg.node(); }