D3: how to rescale the pack layout to fit only visible circles? - javascript

I have a pack layout with multiple levels (depths), out of which a few first ones are made not visible (just like in the example: http://bl.ocks.org/mbostock/4063269:
... where the root node is hidden).
However, the scaling works by fitting ALL the circles in an svg container, not only the visible ones. This leads to lost space if a few top-cirles are made invisible...
What would be a good way to rescale the layout to fit only the visible circles in the container? I thought about checking all nodes for extreme x/y coordinates and rescaling based on that...

Related

How to make getBBox ignore clipped svg elements

I have a javascript/nw.js project with an svg (referred below as svg-canvas) element that serves as a drawing canvas and inside it I have another movable svg element (referred below as svg-encapsulate) designed to encapsulate a dynamic collection of objects in a constrained space and whose size is therefore clipped using width and height properties. That way elements drawn inside that spill over its edges are clipped, so as not to appear to be spilling outside of the element. However, when I do getBBox on the svg-canvas, the BBox returns size that also includes clipped (invisible) elements inside the svg-encapsulate, which in turn triggers scrollbars for the entire element even when visually (from the perspective what user sees) everything fits. Is there a way to instruct getBBox to ignore clipped elements of the svg-encapsulate, so that one can maintain correct scrollbar behavior? Please note since svg-encapsulate can be resized, moved, and populated with various objects by a user, hardcoded margins and workarounds will not work in this case. Thanks!

D3 - issue with applying scroll to legends container with in svg

I am new to d3.js here, please help, where i want to apply scrolling to div, which has svg and underneath legends, legends will be added dynamically based on the multiline chart, for demonstration i put through single trend line but in real time there will be like 10 to 20 trend lines in the single chart. The issue is the with legends, are cutting off, i know this is because of svg has height limit, how to overcome this problem?, i have tried applying overflow-y:scroll to svg but doesn't work, tried putting legends in foreignObject element works fine but doesn't work in IE, the application that i am working on will run in IE mostly.
Any help is much appreciated.Plunker
It looks like your problem is with the height of the SVG itself. Try resizing the SVG to something larger like:
d3.select('svg').attr('height', 600);
Even try this in the console.
The SVG doesn't really have a max height (as far as I am aware). The problem is that your div is a larger height (400 px) than your SVG (~370px). If the SVG is larger than the div, according to your y-overflow: scroll, it will be scrollable, but will retain the appearance (because of the div) of being 400 px tall. However, if the div is larger than the SVG, there's nothing to scroll.

Font Size Issue in Cytoscape.js

I am using a circular layout in Cytoscape.js. I noticed that the size of nodes and font is correlated/connected to each other. Increasing the font size renders smaller node sizes (a relative view I understand). Is there a way to disconnect this relation and show increased font size without affecting the size of nodes?
I want it for all nodes (for single/ isolated events, the increase in font size doesn't affect node size, but for all nodes together, it leads to relative scaling).
You should read the article on Wikipedia for matrix transformations in graphics: https://en.wikipedia.org/wiki/Transformation_matrix
Basically, the concept of a zoom is just a stretch/scale transform. That means if you change the viewport zoom level, you scale everything. When you run a layout and fit to the viewport, you're doing an automatic pan and zoom based on the total bounding box of the elements.
Node size and label size are not at all related. You're using different zoom levels at the same time you're changing the label size, making it easy to conflate the two factors.
Just adjust your node size if you want a smaller/larger node, and just adjust your label size if you want a smaller/larger label. If you want absolute, rendered sizes you can't use zoom levels other than 1 or any fitting.

Dimensions of visible area in an svg

How would one go about finding the maximum and minimum x & y values in an svg, in the presence of a viewbox that is. The issue that occurs is that I am attempting to create a partially transparent rect overlay. However, the different versions of android spew out wonderfully inconsistent differences between container widths. Rephrasing the question for clarity how would one find the visible coordinates of an svg where the coordinates lie outside the viewbox, but the aspect ratio has been preserved?

D3: Overflow in SVG group element

I have the following SVG:
The legend block on the right top (highlighted by the red rectangle) is a group element containing legends for the line charts on the left.
The problem I am facing is that the number of these legends are dynamic and are added one below the other. The SVG has a fixed height (as of now) in pixels. So, my worry is that after a certain point these legends will overflow the enclosing SVG element.
Is there a way of adding a vertical scrollbar to the legend group element so that any number of legends can be incorporated? Or should I, in some way make the SVG height dynamic according to the number of legends?
What is the best way to tackle this problem?

Categories

Resources