Databases
StackOverflow2013
Postsdbo
PO
 

Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p><strong>Update 6/4/14</strong></p> <p>See also <a href="https://stackoverflow.com/a/17976205/380487">Mike Bostock's answer here</a> for changes in D3 v.3 and the <a href="http://bl.ocks.org/mbostock/6123708" rel="nofollow noreferrer">related example</a>. I think this probably supersedes the answer below.</p> <p><strong>Update 2/18/2014</strong></p> <p>I think @ahaarnos's answer is preferable if you want the entire SVG to pan and zoom. The nested <code>g</code> elements in my answer below are really only necessary if you have non-zooming elements in the same SVG (not the case in the original question). If you <em>do</em> apply the behavior to a <code>g</code> element, then a background <code>rect</code> or similar element is required to ensure that the <code>g</code> receives pointer events.</p> <p><strong>Original Answer</strong></p> <p>I got this working based on the <a href="http://bl.ocks.org/4062045" rel="nofollow noreferrer">zoom-pan-transform</a> example - you can see my jsFiddle here: <a href="http://jsfiddle.net/nrabinowitz/QMKm3/" rel="nofollow noreferrer">http://jsfiddle.net/nrabinowitz/QMKm3/</a></p> <p>It was a bit more complex than I had hoped - you have to nest several <code>g</code> elements to get it to work, set the SVG's <code>pointer-events</code> attribute to <code>all</code>, and then append a background rectangle to receive the pointer events (otherwise it only works when the pointer is over a node or link). The <code>redraw</code> function is comparatively simple, just setting a transform on the innermost <code>g</code>:</p> <pre><code>var vis = d3.select("#chart") .append("svg:svg") .attr("width", w) .attr("height", h) .attr("pointer-events", "all") .append('svg:g') .call(d3.behavior.zoom().on("zoom", redraw)) .append('svg:g'); vis.append('svg:rect') .attr('width', w) .attr('height', h) .attr('fill', 'white'); function redraw() { console.log("here", d3.event.translate, d3.event.scale); vis.attr("transform", "translate(" + d3.event.translate + ")" + " scale(" + d3.event.scale + ")"); } </code></pre> <p>This effectively scales the entire SVG, so it scales stroke width as well, like zooming in on an image.</p> <p>There is another <a href="http://jsfiddle.net/56RDx/2" rel="nofollow noreferrer">example</a> that illustrates a similar technique.</p>
    singulars
    1. This table or related slice is empty.
    1. POIs there a way to zoom into a D3 force layout graph?
      singulars
      1. PTQuestion
    1. PTAnswer
    1. USCommunity
    1. USnrabinowitz
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. POIs there a way to zoom into a D3 force layout graph?
      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. VTUpMod
    3. VO
      singulars
      1. PO
      1. This table or related slice is empty.
      1. VTAcceptedByOriginator
    1. COThanks! This saved me some time tonight! http://nolasatellitegovernment.tulane.edu/vis/d3/force/linked.html
      singulars
      1. PO
      1. USjerrygarciuh
    2. CO+1 Beautiful approach. Thank you very much for your time.
      singulars
      1. PO
      1. USLegend
    3. COAs of 12/1/2011 actual browser behavior isn't the same as in your jsFiddle. The fiddle preserves the force layout click+drag behavior. In a real browser (IE, Chrome, Safari, Firefox) click+drag results in a pan of the whole layout. Any thought on how to have the zoom/pan layer ignore clicks on nodes?
      singulars
      1. PO
      1. This table or related slice is empty.
 

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