The links between nodes are neither moving nor having any effect on the nodes around them... What am I missing?? The links are created by looping over nodes and placing one in source, one in target. The lines themselves are appended within their own in the class "lines", nodes in "nodes". The reason for removing the "lines" and "nodes" class at the beginning of the function is that the chart is updated on an arbitrary interval.
EDIT I can drag a node.. it bounces back as a result of 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", d.x = event.x).attr("cy", d.y = 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);
});
}