Comments (4)
@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 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)
- Issues in creating a grouped horizontal bar chart HOT 1
- hide tooltips associated with visualization when removing the visualization HOT 4
- Network error when using string value matching the id of the node in links HOT 3
- visualizations no longer setting default className to viz HOT 1
- Bubbles Drilldown? HOT 5
- How to change the color of the links in a network? HOT 2
- How to change the color of the links in a network? HOT 1
- export ColorScale and Legend classes HOT 1
- Active function in Network component HOT 1
- Tool Tips remain after GeoMap page is unloaded and browser displays another 'page'. HOT 2
- improve default base styles HOT 1
- .d3plus.js documentation in README out of date HOT 1
- Percentage on custom treemap label HOT 1
- bar charts axis starting at non-zero HOT 1
- create React wrappers for non-viz classes
- remove *Format functions after updating d3plus-viz
- update to use new React context HOT 6
- Legend and Tooltip styling HOT 2
- v.1.2.0 does not have required packages HOT 2
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
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.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from d3plus-react.