Filtering d3-force directed nodes based on an input value

Community Help
1

Hi,

I’ve been working on porting the extra features from http://www.coppelia.io/2014/07/an-a-to-z-of-extra-features-for-the-d3-force-layout/ to add to https://observablehq.com/@d3/force-directed-graph.
I succeed for most of them https://observablehq.com/@maliky/force-directed-graph-a-to-z
but I’m stuck with filtering the nodes by name (or id) based on the value from an auto-complete field. Here --> https://observablehq.com/@maliky/s-for-search-force-directed-graph

I cannot get my button to fire the searchNode() function. I tried declaring it outside of the main cell, inside it, before the button declaration, after. Kaput.
I always get an
Uncaught ReferenceError: searchNode is not defined at HTMLButtonElement.onclick

Is it because the button is not created at the time the script looks for searchNode() ?
Should I then use an explicite addEventlistener method to the created button to make this work ?

I’m sorry, this is probably my lack of javascript knowledge that brings up this question

2

I’m starting to understand, that I should use the automatic update of cells and the d3.join.update to solve my problem.

I can easly filter the nodes based on the value of a viewOf text file.
I should then update my network with the array of filtered nodes.

This means I have to master the join update feature of d3, things that I never understood fully. But it’s probably time this changes.

This helps moving forward. Calling a function defined in one cell from another cell

1 Like