Custom hover behavior about d3plus-react HOT 4 CLOSED

@davelandry thanks a lot for this explanation, it is very helpful! 😊

from d3plus-react.

Hi @michelacerro, check out this other issue, which includes example code showing how to assign different functions to the shapes in the chart and the legend: d3plus/d3plus-storybook#22

from d3plus-react.

Hi @davelandry, thanks for the reply.

I've tried changing the "mouseenter.shape" and "mouseenter.legend" functions, but I can't figure out what they expect to return.
For clarity, in this specific case, I would like not only the element the mouse is over to go into the "hover" state, but also its siblings, the other elements belonging to its group.
What has to come back for their status to change too?
Or, if that's not possible, how can I access the nodes of these elements to be able to manually edit their style?
Could you give me an example?

Thanks in advance,

Michela

from d3plus-react.

@michelacerro the mouse event functions are not expected to return anything, but rather simply execute code when that even occurs.

What you are trying to do is possible, but might require some complex JavaScript to access some internal states of D3plus. If you use a name/non-anonymous function, like in the following example, you can get access to this, which is the internal state of the current viz executing the mouse event:

on: {
  "mouseenter.shape": function myFunctionName(d) {
    const vizState = this;
    // do stuff here!
  }
}

Take a look at the default mouseenter function (which you may want to remove, by passing null). In it, it uses some internal (undocumented 😅) d3plus methods to identify the elements unique keys, and uses those to set the hover method. The hover method (publicly accessible) is what allows you to "highlight" certain data points, and is used internally for the default hover events. The function provided to hover is expected to return true or false based on the data point d passed to it (it is used internally as part of a filter function).

https://github.com/d3plus/d3plus-viz/blob/master/src/on/mouseenter.js

from d3plus-react.