Los enlaces entre los nodos no se mueven ni tienen ningún efecto sobre los nodos que los rodean... ¿Qué me estoy perdiendo? Los enlaces se crean recorriendo los nodos y colocando uno en el origen y otro en el destino. Las propias líneas se añaden dentro de sí mismas en la clase "líneas", nodos en "nodos". La razón para eliminar las clases "líneas" y "nodos" al comienzo de la función es que el gráfico se actualiza en un intervalo arbitrario.
EDITAR Puedo arrastrar un nodo... rebota como resultado de forceX,Y
function render(nodes, links) { //const links = []; d3.selectAll('.nodes').remove(); d3.selectAll('.lines').remove(); var color = d3.scaleLinear() .domain([0, 1, 3]) .range(["green", "orange", "red"]); const circles = svg.append('g').attr("class", "nodes") .selectAll("dot") .data(nodes) .join("circle") .attr("cx", d => d.x_axis) .attr("cy", d => d.y_axis) .attr("r", d => d.radius) .attr("id", d=> d.id) .style("fill", d => color(d.x_axis / d.y_axis)) .on("mouseover", showTooltip) .on("mousemove", moveTooltip) .on("mouseleave", hideTooltip) .call(d3.drag().on("start", started)); const simulation = d3.forceSimulation(nodes) .force( 'link', d3.forceLink(links).strength(.05) ) .force('x', d3.forceX(d => d.x_axis).strength(.08)) .force('y', d3.forceY(d => d.y_axis).strength(.08)); const lines = svg.append('g').attr("class", "lines") .selectAll('line') .data(links) .enter() .append('line'); console.log(lines); function started(event) { //simulation.alpha(0.085); const circle = d3.select(this).classed("dragging", true); event.on("drag", dragged).on("end", ended); function dragged(event, d) { circle.raise().attr("cx", dx = event.x).attr("cy", dy = event.y); } function ended(event, d) { simulation.alpha(7); simulation.restart(); circle.classed("dragging", false) } } simulation.on('tick', () => { circles.attr('cx', (node) => node.x).attr('cy', (node) => node.y); lines.attr('x1', (link) => link.source.x_axis) .attr('y1', (link) => link.source.y_axis) .attr('x2', (link) => link.target.x_axis) .attr('y2', (link) => link.target.y_axis); });}