D3 mousedown event deleting the wrong node

Question

I am trying to add a delete node feature in this jsfiddle

The refresh method is adding on(\"mousedown\", mousedownNode) event to each circle, b

Answer 1

I didn't dig into this much, as I felt like the problem was quite obvious to me. I can't exactly explain why the GW node returns but it's something to do with your data-binding being incorrect I believe.

When you're doing your data join you're basically telling D3 to key on an index. Now the original GW node in the DOM is going to be re-used if it weren't the last in the index because the indexes will be offset by 1.

node = node.data(nodes);

If you change this to key on a field

node = node.data(nodes, d => d.id);

You'll find your problem goes away.