Databases
StackOverflow2013
Postsdbo
PO
 

Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>I'm guessing he's using a d3.js <code>transition</code>, see <a href="https://github.com/mbostock/d3/wiki/Transitions" rel="nofollow">https://github.com/mbostock/d3/wiki/Transitions</a>, to basically animate the line (and values) from the current line position to where the mouse cursor currently is. You can tell he isn't trying to just follow the mouse curse because if you move the cursor quickly you can see the line lag behind a bit, this is the animation time of the transition.</p> <p>I put together a quick example of how this is done in d3.js at <a href="http://jsfiddle.net/2N2rt/4/" rel="nofollow">http://jsfiddle.net/2N2rt/4/</a>. I didn't play around with it much so I'm sure you can get it even smoother, but this seemed pretty good.</p> <pre><code>var line = d3.select('#selection_line'), page = d3.select('#page_content'), x = 0; page.on('mousemove', function() { x = d3.mouse(this)[0]; }); var update = function() { line.transition() .duration(5) .ease('cubic-in-out') .style('left', x + 'px'); }; setInterval(update, 35); </code></pre> <p>Also keep in mind that <code>svg</code> elements tend to animate a lot more smoothly than <code>DOM</code> elements. Here's a pure <code>svg</code> example ( <a href="http://jsfiddle.net/2N2rt/10/" rel="nofollow">http://jsfiddle.net/2N2rt/10/</a> ).</p> <pre><code>var graph = d3.select('#graph') .append('svg') .attr('width', '100%') .attr('height', 600); var box = graph.append('rect') .attr('transform', 'translate(0, 100)') .attr('width', '100%') .attr('height', 200) .attr('class', 'page_content'); var line = graph.append('line') .attr('transform', 'translate(0, 50)') .attr({'x1': 0, 'y1' : 0, 'x2': 0, 'y2': 300}) .attr('class', 'selection_line'); var x = 0; graph.on('mousemove', function () { x = d3.mouse(this)[0]; }); var draw = function () { line .transition() .duration(18) .attrTween('transform', d3.tween('translate(' + x + ', 50)', d3.interpolateString)) .each('end', draw); }; draw(); </code></pre> <p>Again, this is just a quick example but hopefully it gives you some ideas. </p>
    singulars
    1. This table or related slice is empty.
    1. POSmooth Javascript mousemove similar to Cubism.js
      singulars
      1. PTQuestion
    1. PTAnswer
    1. USBill
    1. USBill
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. POSmooth Javascript mousemove similar to Cubism.js
      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. VTUndeletion
    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. COThis works great! It doesn't cause the line to disappear. I don't know why this is true, but this is exactly what I was looking for! So are you saying that I should change the '#selection_line' to an SVG? This should be easy to do because the line will actually be following a mouse when hovered over and SVG graph.
      singulars
      1. PO
      1. USfrshca
    2. COYes, the line should be an SVG line that you then apply a positional transform to using a similar transition to the one I used. Since SVG has built in animation support it will be a lot smoother then moving a DOM element but repeatedly changing it's css values.
      singulars
      1. PO
      1. USBill
    3. COI've updated my answer with an `svg` example as well.
      singulars
      1. PO
      1. USBill
 

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