Databases
StackOverflow2013
Postsdbo
PO
 

Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>The internal and external dimensions of SVG can be independently controlled using the <a href="http://www.w3.org/TR/SVG/coords.html" rel="nofollow noreferrer"><em>viewBox</em></a> attribute. When you talk about finding the <em>size of the <code>g</code></em> element, it only makes sense if there there is no <code>viewBox</code> defined and there are no other <em>scale</em> transformations anywhere.</p> <p><img src="https://i.stack.imgur.com/vasCf.png" alt="svg width height and viewBox"></p> <p>Here is how I would suggest you do it:</p> <ol> <li>Set the <code>width</code>/<code>height</code> of the <code>svg</code> element to the <code>window.innerWidth</code> and <code>window.innerHeight</code>, or to the maximum dimension you want it to grow to.</li> <li>Set the <code>viewBox</code> attribute to something like <code>"0 0 100 100"</code> and then define all scales in your code to have the domain <code>[0, 100]</code>. This will ensure that the graph <em>shrinks</em> to fit in your designated area.</li> </ol> <p>Also, take a look at how <a href="https://github.com/novus/nvd3/blob/master/src/utils.js#L32" rel="nofollow noreferrer"><code>nvd3</code> handles window resizes</a>, and how to maintain the coordinate system inside the SVG element upon resize using <a href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute" rel="nofollow noreferrer">preserveAspectRatio</a>.</p> <hr> <p>From what I could glean from their webpage, darge-d3 does not allow for setting the layout options to limit the render size explicitly and does not return the maximum dimensions it used. One could, however, use <a href="http://www.w3.org/TR/SVG/types.html#__svg__SVGLocatable__getBBox" rel="nofollow noreferrer"><code>getBBox()</code></a> to get the dimensions of the <code>g</code> box where it rendered and try to set the <code>viewBox</code> such that it <em>just</em> fits the SVG (or set the <code>height</code>, <code>width</code> on the SVG to match the dimension for the <code>g</code> 1:1, but that could lead to a broken layout.</p>
    singulars
    1. This table or related slice is empty.
    1. POResizing d3 / dagre-d3 svg to show all contents
      singulars
      1. PTQuestion
    1. PTAnswer
    1. USmatanster
    1. USmusically_ut
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. POResizing d3 / dagre-d3 svg to show all contents
      singulars
      1. PTQuestion
    1. This table or related slice is empty.
    1. VO
      singulars
      1. PO
      1. This table or related slice is empty.
      1. VTUpMod
    2. VO
      singulars
      1. PO
      1. This table or related slice is empty.
      1. VTAcceptedByOriginator
    3. VO
      singulars
      1. PO
      1. This table or related slice is empty.
      1. VTUpMod
    1. COThanks, `getBBox()` was the key. This works: `var bbox = d3.select("#svg{{ loop.index }}").node().getBBox(); d3.select("#svg{{ loop.index }}").attr("height", bbox.height + 40).attr('width', bbox.width + 40);`
      singulars
      1. PO
      1. USDennis Kaarsemaker
    2. COJust a heads up - dagre-d3 now exposes width and height attributes on the layout graph. For an example, take a look at: https://github.com/cpettitt/dagre-d3/blob/master/demo/sentence-tokenization.html#L85.
      singulars
      1. PO
      1. USChris Pettitt
    3. CO@ChrisPettitt Thanks!
      singulars
      1. PO
      1. USmusically_ut
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload