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.
Related
The sample is here
https://codesandbox.io/s/l4pq6x00xq?file=/src/Hello.js
is there any way to move chart in zoomed state?
I've tried to recalculate the ticks every time user rolls the wheel of a mouse (no keyboard events in recharts) but it takes so much time and it is super user unfriendly
Also I want to avoid brush tool
We're making a graph for a project right now. This graph should show all crossways of a city. And most ways between them. We started of using cytoscape.js for drawing the graph. Now we want a background behind the graph. This background will be the map of that city, so it has to be scrollable and at the right position.
Our first idea was to make a rectangle node and give it a background. Than we added the map and put in the right coördinates. Now the map is scrollable and is always at the right position. This gave us two problems. First the graph can't be panned anymore, cause when you try to pan you will try to select the underlying node. We fixed this by using the cytograh-panzoom plug-in.
The seccond problem is, that the edges aren't clickable anymore, because the background-node is now covering them and it seems impossible to get the edges on top.
The questions:
Is there a better library to draw such a graph?
If not, is it possible to draw edges on top of the nodes with cytoscape?
Is there another way with cytoscape to do this?
Kind regards
You could listen to viewport events and update the background-position and background-size properties of a background image set in the CSS for your cy div.
Or in lieu of a background image, you could have a separate div with an image that uses CSS transforms instead of background-* properties.
I'm using leaflet to allow uses to draw custom SVG paths (polygons) on a map. The problem is that when the user zooms out, the polygon becomes too large and obscures the rest of the map.
I've looked online for examples, and the resources I've come across uses the geo functions from the d3.geo library. Whereas in my use case I'm using d3, leaflet, and an SVG layer over the map.
Is there a formula that I can apply to resize the objects correctly? I know that I will have to apply a translate function which will be based on the width height and current zoom level, but I was wondering if there is a standard way to do this?
EDIT: Here is one resource I found, but it uses the d3 geofunctions, and from what I can gather, it seems to redraw the polygons every time the map view is reset (which might be inefficient(?)
http://www.d3noob.org/2014/03/leafletjs-map-with-d3js-objects-that.html
Just apply CSS to change the size of the SVG or just modify the SVG using JS or what ever you use for SVGs every time the scroll event is triggered.
Google maps has an event in it's api which is triggered when the zoom level changes.
https://developers.google.com/maps/documentation/javascript/events#EventProperties
I came across this Jquery based pie chart online. You can download it freely from here: http://www.elated.com/articles/snazzy-animated-pie-chart-html5-jquery/
I am unable to convert the mouse click function of sliding pie pieces to react on mousehover in the same way. There seem to be an issue with the way they react to mouse hover. However, when the same mousehover is applied to the table, there is no problem and the pie chart reacts as expected. Can you please look into the code and tell me what needs to be changed in order to get the pie chart to expand on mouse hover.
Thank you very much.
The reason the hover event doesn't work on the chart, is because the chart is a canvas element. The slices aren't separate elements. So you need to use a mousestop event, that gets called every time the user hover over a slice and holds the mouse still.
The mousestop event doesn't come with Jquery, but Richard Scarrott made a Jquery plugin: http://www.richardscarrott.co.uk/posts/view/jquery-mousestop-event
You can use it on the chart like this:
$('#chart').mousestop(100, handleChartClick);
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.