Databases
StackOverflow2013
Postsdbo
PO
 

Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>You can see (most of) a working implementation here: <a href="http://jsfiddle.net/nrabinowitz/fF4L4/2/">http://jsfiddle.net/nrabinowitz/fF4L4/2/</a></p> <p>The key pieces here:</p> <ul> <li><p>Call <code>d3.behavior.zoom()</code> on the <code>svg</code> element. This requires the <code>svg</code> element to have <code>pointer-events: all</code> set. You can also call this on a subelement, but I don't see a reason if you want the whole thing to pan and zoom, since you basically want the whole SVG area to respond to pan/zoom events.</p> <pre><code>d3.select("svg") .call(d3.behavior.zoom() .scaleExtent([0.5, 5]) .on("zoom", zoom)); </code></pre></li> <li><p>Setting <code>scaleExtent</code> here gives you the ability to limit the zoom scale. You can set it to <code>[1, 1]</code> to disable zooming entirely, or set it programmatically to the max size of your content, if that's what you want (I wasn't sure exactly what was desired here).</p></li> <li><p>The <code>zoom</code> function is similar to your <code>dragmove</code> function, but includes the scale factor and sets limits on the pan offset (as far as I can tell, d3 doesn't have any built-in <code>panExtent</code> support):</p> <pre><code>function zoom() { var scale = d3.event.scale, translation = d3.event.translate, tbound = -h * scale, bbound = h * scale, lbound = (-w + m[1]) * scale, rbound = (w - m[3]) * scale; // limit translation to thresholds translation = [ Math.max(Math.min(translation[0], rbound), lbound), Math.max(Math.min(translation[1], bbound), tbound) ]; d3.select(".drawarea") .attr("transform", "translate(" + translation + ")" + " scale(" + scale + ")"); } </code></pre> <p>(To be honest, I don't think I have the logic quite right here for the correct left and right thresholds - this doesn't seem to limit dragging properly when zoomed in. Left as an exercise for the reader :).)</p></li> <li><p>To make things simpler here, it helps to have the <code>g.drawarea</code> element not have an initial transform - so I added another <code>g</code> element to the outer wrappers to set the margin offset:</p> <pre><code>vis // snip .append("svg:g") .attr("class","drawarea") .append("svg:g") .attr("transform", "translate(" + m[3] + "," + m[0] + ")"); </code></pre></li> </ul> <p>The rest of the changes here are just to make your code work better in JSFiddle. There are a few missing details here, but hopefully this is enough to get you started.</p>
    singulars
    1. This table or related slice is empty.
    1. POD3.js Zooming and panning a collapsible tree diagram
      singulars
      1. PTQuestion
    1. PTAnswer
    1. This table or related slice is empty.
    1. USnrabinowitz
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. POD3.js Zooming and panning a collapsible tree diagram
      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. COMany kudos for you, Mr. Rabinowitz... Excelent job, thank you! Works like a charm! My attempts here were failing precisely because of aplying `d3.behavior.zoom` to the wrong wrapper - it just kept skipping around like crazy... But this works really well (even if a bit slower/heavier on the browser)...
      singulars
      1. PO
      1. USJoum
 

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