I was trying to create a new Sankey chart, and I found that the position of the nodes are not fixed once I drag drop them.
If I again run the code, the nodes go back to their respective places.
Can we fix the node position so that We donot need to drag the boxes again and again?
Related
I'm completely new to d3. In my visualization, I'm adding tooltip to the nodes and node texts using d3 tip. But when it comes to the corners or edges, the tooltip clips from the viewing area. How do I dynamically move the tooltip's position such a way that it doesn't clip?
Consider this code example in d3 version 4.
There's a number of yellow circles overlaid on top of a black background.
I can drag the circles around with my mouse. I can also zoom in and out using the mousewheel, providing my mouse is not over a circle.
There's two problems that I'd like to fix:
I would like to zoom in when I hit the scroll wheel while I am moused over a circle.
Drag and drop is incorrect when I am zoomed in or out of the graph - the circles don't follow the mouse.
Solved it. Here's the link to the gist with the solution.
How I fixed each problem:
The zoom problem was fixed by making the zoom handler trigger on the underlying SVG element, not an overlaying rectangle like it was previously.
The drag problem was fixed by adjusting the drag function to take into account the current level of zooming
I have an XY graph with a legend that automatically resizes to fit the contents of the legend. The problem is that sometimes the legend text is such that the resizing overlaps the plot, see the image below. Is there a way to keep the legend from resizing over the plot data? In other words to confine the resizing operation to outside of the plot box?
Update: it would seem that part of the problem is the auto expand ability of the legend always expands to the left-hand side. Placing the legend on the left-hand side of the plot keeps the legend from covering the graph.
1:
You probably have moved the legend, changing it's anchor point. You can move the legend to the right side of the graph element and it should re-anchor.
I am trying to put together a force directed graph in which I would like some of the nodes to be progress bars. I have put together a circular progress bar using a donut pie chart but now I am struggling to see how to instantiate several of these pie chart and have them in place of node.
Circular progress bar: http://jsfiddle.net/qwTFN/
I have already found a related question 1 and tweaked some code to put a standard pie chart as node but my problem here is that I want my own custom chart (as per the jsfiddle link)...
any ideas appreciated ;)
1 Place pie charts on nodes of force directed layout graph in D3
I have a Force Directed Graph that I've generated with D3 and within each node (which are represented as large circles) I'd like to pack in a bunch of smaller circles using D3's Circle Packing. Is it possible to use both of these layouts in one visualization? How does one insert a layout into a node?
I figured it out once I realized that svg elements were just regular dom nodes and I could manipulate them with jquery. I ended up created two svg locations, one for display and one for creation of svg objects. I built one object at a time in the builder location and then moved it off to somewhere else in order to work on the next guy. When I was ready I built the force graph on the main display and populated the nodes there with the circle packed nodes that I had saved off somewhere else.