I am currently specifying my own events handlers for C3.js graphs thanks to the people that answered this post ;) . However my event handlers are interfering with some C3.js event handlers. For example my custom drag&drop zoom interferes with the default behaviour of C3.js, which is translating in a zoomed graph.
Here is the jsFiddle
With such a setup dragging on my graph makes it move horizontally and zoom.
I would like to know if it is possible to remove existing events such as mouse wheel to zoom or drag&drop to move on a zoomed graph? I've already tried to assign null to these events on c3-event-rects layer but it doesn't seem to work.
Thanks a lot :)
You have zooming enabled in your chart options - this will cause the C3 zooming to kick in on mouse scroll. Just change this to false
zoom: {
enabled: false,
...
Since you are using the API to call zoom in your handler (vs. triggering the events), the zoom call in your handlers will still continue to work with this set to false.
Related
I'm creating a graph with react-vis-js. The graph should be moved in unity with a map that is shown behind the graph. Therefore, I created custom Arrow and Zoom keys. They Work fine with the map. Now I am trying to implement the keys for the graph.
I tried to find a way to move the center of the graph but unfortunately there isn't a way of doing this. Furthermore, I tried to find a way to trigger the keypress events of the keyboard in the onclick of the buttons. The only thing I found was jQuery code that looked like this:$('item').keydown();
This didn't seem to work either. I think it's because this is actually meant to be used as listener not as trigger.
Questions:
Is there a way to have custom buttons for visjs to move and zoom the graph?
Is there a way to trigger keyboard button events with javascript UI buttons?
Do you have other ideas of solving this issue?
I've built a marker on my Mapbox map that looks like this when a user mouse over it:
The issue I'm running into is that the document icon is a separate layer from the background pin. This is so users can upload custom icons. When using the mouseover and mouseleave events to create a hover popup on the background pin layer, the popup flickers when the user hovers over the icon layer. This is because the user is technically leaving the background pin layer.
I know there are javascript hacks to potentially do this that are messy, but what I'm really looking for is a way to "ignore" events on a mapbox layer. Is this possible?
Edit: The markers here are rendered as a Mapbox layer, not as HTML markers and are thus drawn using the canvas (I believe), so using CSS to ignore events is not possible.
A simple way to ignore mouse events using CSS is to use the style property pointer-events:none this will not trigger any pointer(mouse) events on the element
Instead of registering events per layer, you could register the mousemove event without specifying the layer and use queryRenderedFeatures to see if the cursor is on either of your two layers.
Another approach is use a technique like https://www.mapbox.com/mapbox-gl-js/example/add-image/ and create a composited image client side so you only have the one layer.
I am using EventDrops for displaying an event series.
I am new to D3 and I am having tough time understanding the code.
Using Eventdrops we can zoom in and out in the time series.
Now I want to add a transition that on load the events should be fully zoomed in and then slowly zoom out.
How can I do that?
I am not able to trigger the zoom effect on the SVG element.
Is it possible to recall the chart.draw function on drag and drop of elements.
I want to drag charts around the dashboard, but when I have tried to to implement this, it has just copied the chart and all interactivity has been lost.
Yes, you can do that, but your chart objects have to be in scope for your drag-n-drop event handlers.
I am trying to develop a graph visualization webpage using d3, and I
need to provide basic zoom and pan functionality over the graph.
I saw the d3.behaviour.js file to see how the zoom functionality
works. It is fine as far as the default behavior goes. But is there
any way by which the zoom function can be called manually, lets say by
attaching it to zoom it and zoom out buttons.
Zoom behavior in d3 seems very tied to the mouse events.
A workaround you can do is manually firing 'mousewheel' (ie/webkit) and 'DOMMouseScroll' (firefox) events when you click a button.
You can see an example on how to register and dispatch these events here: http://jsfiddle.net/6nnMV/
I think you just need to get the current scale, increase/decrease by one, and then set it back https://github.com/mbostock/d3/wiki/Zoom-Behavior#wiki-scale.
After that, employ https://github.com/mbostock/d3/wiki/Zoom-Behavior#wiki-event to update the visualization with the new scale.