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.
Related
using python graphviz I am trying to render a DiGraph where there are groups of nodes connected to each other and separate from other groups. The structure is something I am creating on the fly, where I don't really have the full picture of these components before hand, it's something I am hoping the rendered graph would help me understand. I would like for these groups to be aligned vertically in the output svg file instead of all laid horizontally as it is now.
Any ideas?
I am trying to replicate the image below using OpenLayers and D3.js.
I have tried to add triangles along the path using getPointAtLength() and just adding them as SVG elements, but that does not take care of the orientation of the line. To get this working I would need to find the slope and rotate each triangle.
I have also taken a look at this StackOverflow answer:
How to place arrow head triangles on SVG lines?
This looks great but unfortunately it only works for polylines. However, since I am using D3.js together with OpenLayers it seems like I have to use paths and not polylines since I need the d3.geo.path function to transform all features on the map.
As for now it seems like I have the following options:
Add triangles along the path by calculating the slope at every point. Is there an easy way to calculate slope along a path?
Somehow combine D3.js og and OpenLayers and use polylines instead of paths. Is this possible?
Somehow convert my path to a polyline and draw that one instead of the path. Is there a function for doing this?
Are there other options that I can test out?
You could call getPointAtLength at two points separated by a delta. The slope of the two points would be the slope of the path if the delta is small enough.
I have a scatterplot created with d3. The circles/points are all the same size. The grid goes from 1-10 on both x and y axes. All points have x and y values of whole numbers (no decimals).
My problem is that I frequently have multiple data points with the same coordinates. Because the points are all the same size I can't tell how many points are at a single spot.
My points have tooltips, one for each data point. So, I was thinking that it's OK to show only a single point/circle if I can show a tooltip that contains information about all points with the same x/y coordinate. I can't think of a way to do that though because the tooltips seem to be generated for a single point, not "for all points at the same coordinate", or generated dynamically.
How can I do this?
As #LarsKotthoff mentioned, aggregating my data before rendering and adding a key function to identify each aggregate were the two steps needed to get everything working properly.
I have map data for all of the towns in a state -- let's say California. I display every single town on a map using d3 -- everything is good so far. The projection I use makes use of the scale() and translate() functions, among others, to show my map how I want -- it looks nice.
Here is my problem. I need an automated way to expand my map projection so that it uses the entire svg area. In other words, I want to make my map bigger and bigger until either its width exactly equals the svg width or its height exactly equals the svg height.
I know the bounds function helps do this for an individual feature, but I want the entire state, not the individual town features, to fill the svg area.
Thank you for your help!
I just started learning d3, and very first thing I made is this sorta lame fiddle
Now I wonder how should I attach labels to those circles. Is it possible to nest a label (let's say current radius value) in a circle so it would always move with the circle, or you have to treat labels like independent objects and manage everything accordingly?
You can use a grouping element (<g>) to hold both the circle and the associated text label so they are always together. Then you can position the enter group by using the translate command on the transform attribute (instead of positioning the circle directly as you're doing now).
So basically, you bind the data to the <g> elements instead of to the <circle> elements as you're doing now. Then you can just append a "circle" and a "text" to the "g" (no data join) and both of those child elements will automatically inherit the data themselves.