Node is not clickable or responding to any mouseevent if corresponding node object has 'val' property

[wunaidage]

Describe the bug
Node is not clickable or response to any mouse event if corresponding node object has 'val' property. Using such graph data, if by default, the node will not be drawn. if use nodecanvasobject function, customized things will be drawn but not clickable.

To Reproduce
Steps to reproduce the behavior:
Go to any example, add val property to any node in the graph data

see jsfiddle: https://jsfiddle.net/0b16jmkq/4/

Additional context
the type definition lib: @types/force-graph has a GraphNode type which takes node associated data as 'val', this could be really buggy for the graph and make ppl (like me) debugging why the click is not working for 6 hours.

[vasturiano]

@wunaidage in regular drawing mode, the size of a node is determined by the nodeVal property, which defaults to the val attribute in each node's data.
The nodeVal property also determines the area used for click/hover interactions when doing customly drawn nodes using nodeCanvasObject.

If the val attributes in your data set represent anything else other than node sizes, it's recommended to modify this property via f.e. .nodeVal(node => /* your code */), to not interfere with the node sizes and/or pointer interactions.

[wunaidage]

@vasturiano thank you for the clarification. It is really confusing since the document said nodeVal has a default value of val for which I though was a string value, but in fact another property of the node object

[vasturiano]

@wunaidage I'm glad it's clear now. This is how all the accessor methods in the library work. They accept, in increasing levels of customization, either a constant, an object attribute or a function. This is to allow varying degrees of flexibility when configuring the component.