I need a JavaScript/HTML5 Library to achieve the following requirement which nodes in the same level (1 and 2 ) should be positioned in two different locations [as per another data attribute.]
I look though lot of libraries but coundnt not achieve this , any ideas on directly or indirectly achieve this ?
You have two options:
1. You create two item templates, the first one must have an extra space at the bottom. And Items should be aligned to bottom, so it would create affect that your first item raised inside of row.
2. You need to create explicit collection of rows and set their minimal height. And then align every item vertically.
In general I consider it is wasting of screen space. You can achieve the same affect by colors, border width, shadows etc without wasting pressures screen space. It looks like you are trying to mimic paper org chart in your application and it is wrong from my perspective.
Related
I'm trying to combine a calendar with a chart on one webpage. They need to be on the same timeline (for example to mark the current day with a line). They do not show the same data (So the calendar events are independant from the chart values).
Illustration of how it should look (The final solution would have different views, per week, per month, per year)
My first instinct was to use a HTML table (or <div>s formatted like a table) in combination with a chart library, the only difficulty there is getting both variants onto the same timeline (They need to line up perfectly).
That's why the idea of using SVG came up (which seems to be the prominent idea in the team), but drawing every table cell with <rect>, taking into account position, border width and then also manually positioning texts (and also clipping them if they get too long) seems like a major drawback.
Is there any sane and straightforward way to implement this? I either have to use a third party chart library and try to perfectly line it up, or I draw everything into one SVG, but then everything down to the position of each text element needs to be calculated. I'm afraid if we go the SVG way every little change to the design could suddenly need hours of work (Besides supporting different chart types, combining line and bar charts, possible animations and so on).
I am currently using Cytoscape.js to display a variable amount of nodes using the circle layout. I now want/need to add additional groups of nodes around the original circle, with each group also represented in a circle layout.
The resulting visualization would look something like this:
(where each circle is a circle layout of nodes)
The additional groups don't necessarily need to be directly around the original layout, as the amount of circles also varies. I mostly just need to position the layouts such that they don't overlap each other.
I was able to add the additional groups as individual layouts, but I am unsure how to go about positioning them. I checked the docs and unless I missed something obvious, I didn't see how to accomplish what I need. Any pointers in the right direction would be appreciated!
Specify the boundingBox of each layout to tell it where the bounds of the nodes in the layout should be. Specifying a boundingBox tells the layout to put the nodes within the box. Make sure to specify adequate space and set your overlap-avoidance options appropriately. Overlap avoidance can make a layout need to use more room than it has allotted to it.
By default, Highcharts fills horizontal legends with legend items from left to right, introducing a line break between items when the next item would overflow the legend's bounding box.
I would like to be able to control where such line breaks occur, so that (for example) instead of this:
I could visually group the "Target" and "Actual" items together, and then list the remaining series on subsequent lines like this:
Using useHTML and labelFormatter, I've tried a few different approaches involving <span>s, <div>s and styling to try to achieve this, but none of them have had any effect. The one approach I did manage to make work (from which I generated the second image above) is horribly kludgey, and probably can't be easily generalized for use in real code.
I'm thinking this ought to be a fairly simple thing to do, and I suspect that I'm merely overlooking some existing Highcharts feature that would do it.
Can someone point me in the right direction?
I need to use the D3 Zoomable Icicle example (http://bl.ocks.org/mbostock/1005873) to view a file hierarchy.
I would like to have thumbnails to visualize the "leaf nodes" or "files".
I am not sure if this is possible using the example, and then if it is, how to go about having a different visualization of the folders and files within this layout? I have no idea how to attempt this.
Thanks.
If you implement your nodes as <g> elements, then you can use an .each() call to add either a rectangle or an <image> element and set it's size based on the data.
However, if you have lots of leaf nodes in a partition layout, the partitions tend to end up quite narrow, so the size of your image might be uselessly small. I see from your mock-up that you're hoping to tile the thumbnails in a multi-line grid. You're going to need to create some custom layout code, that identifies all the files (leaf nodes) within a given parent folder and calculates the amount of horizontal space which they collectively take up, then assigns the thumbnail positions into a grid no wider than that space.
You'll also need to make sure that your partition layout is sorting the partitions so that all the leaves are together, separate from any subfolders. I think the default sort should work this way, but it's something to keep in mind.
To make your updating and layout code straightforward, once you calculate the new positions for these leaves, make sure you save the x,y, dx (width) and dy (height) values in their respective data objects, over-writing the position and size created by the partition layout.
I'm using the tree layout and code similar to http://mbostock.github.io/d3/talk/20111018/tree.html
I modified it for a top down orientation.
As each node is opened/expanded, the other open nodes compress to fit everything within the SVG element. Is it possible to prevent that? I would think modifying the x component of each node would be the approach but have not been able to accomplish that. The nodes move over, but are still compressed together.
Also wondering how to change the linking lines from a bezier to right angles/straight lines. Perhaps a separate question is needed.
The compression is automatic in the tree layout (and part of its point). There's no way to turn that off. However, you can simply make your SVG large enough to contain the entire expanded tree without compression. Note that this means that unless your screen is large enough scroll bars will be displayed even when everything that is visible fits onto the screen.
The links connecting the nodes are generated using the diagonal line generator in the example. In principle, you can replace this with any other line generator (e.g. d3.svg.line), but in practice some changes will be necessary because the diagonal line generator accesses source and target nodes in a special way. For a normal line generator, you would need to convert this structure to a two-element array and for each element specify how to access x/y coordinates. Then you can use any of the interpolations to get the curve you want.