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.
Related
I'm building a bubble chart using D3 js (v5), to show some user info and some logic in the center of the chart.
Basically I have a JSON with the total as the root and the children as each result.
I want to display the bubbles around that center div, and make so that the bubbles do not fit on it (this it the picture of what I want to build). Is it possible to do this with d3 js?
Tried to make some map around foreignObject, but nothing changed.
I'm using the rectpack python library to obtain the optimal rectangle packing positions for div elements that contain d3 charts. I have the height, width, bottom-left corner x coordinate, bottom-left corner y coordinate for the div elements on a 1200px wide canvas that looks like the plot below.
Note: Due to the nature of the project I have to iframe the d3 chart HTML in my grid. I only have the width and height info for the charts and they may also be later replaced by another kind of charts like bokeh chart HTML outputs for example. So, positioning the divs is my only options for this.
I need to translate this into a HTML grid but since I'm not a web developer I'm kind of stuck as to how to create such a grid with the information above. I'm using the jinja2 templating engine to create this. However, I'm stuck trying to position the divs exactly since there doesn't seem to be an obvious place to add the position information outside css. But since each element is unique, dynamically creating css for each element doesn't seem to be optimal.
What would be the best approach in this scenario?
I would like to build a very similar (duplicate) as this one. Just the first part where circles show up on the map. Any ideas where I can start? Any jquery plugins that do this?
https://www.airbnb.com/annual
If there aren't any plugins can you give guidance where I should start? Any examples are greatly appriciated.
Just bind an event handler to the scroll event. Get your position from $(window).scrollTop(), and with this information draw and/or resize your array of circles as needed.
There are ways to get the effect on the site without Canvas. You can use position:fixed divs with high border-radius to create circles, and you can resize them and reposition them with JQuery. You can also use SVG, with which you can create an array of all the circle objects at radius 0 initially and increase or decrease the radius with the scrolling effect (or your data set). If you do use canvas, you may need to be prepared to re-render the entire canvas on every scroll tick, since it will be difficult to get the circles to "shrink" otherwise. This will probably make your scrolling choppy, just as it is for me on the site.
I'm using the radial tree example from d3.js (tree-radial.js) and when you click on a node it should move to the center (set it as the new root). I want to get a smooth transition from one tree structure to another but I can't get it to work at all. The click is recognized but I'm not sure how to transition the nodes. Can somebody explain me the steps to get this work or link a short example where this is done?
I don't know if this helps, but you can have a look at this: http://bl.ocks.org/1249394. The clicked node doesn't move to the center in this example, but in essence you will still need to make some similar transitions, just that you will have to adjust the position of the node to be in the center (slightly different coordinates for the transform).
I'm currently creating a visualization of some objects on my project and I'm using the InfoVis toolkit to handle the graph visualization part. So far I have the nodes plotted correctly and relating to each other correctly, but there is a graphical error that is bothering me. When a node is partly off of the canvas, the background of the node is hidden (as it should be) because it is a canvas element itself. However, the contents (which are HTML) are shown completely and they hang off of the canvas element.
You can see the visualization here: Link
Drag around the graph until one of the nodes is partly off the screen and you'll see it. It is more obvious on the right/bottom sides.
Here is a picture of the problem: The black border is the canvas border.
How can I stop this from happening?
Try setting overflow: hidden on the div with the ID infovis-canvaswidget. It looks like the Canvas element is injected into it.