Giter Club home page Giter Club logo

Comments (4)

michelacerro avatar michelacerro commented on July 24, 2024 1

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

from d3plus-react.

davelandry avatar davelandry commented on July 24, 2024

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.

michelacerro avatar michelacerro commented on July 24, 2024

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.

davelandry avatar davelandry commented on July 24, 2024

@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.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.