Databases
StackOverflow2013
Postsdbo
POd3.js - transform & transition, multiple lines
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POd3.js - transform & transition, multiple lines
    primarykey
    data
    text
    <p>I have followed the instructions at: <a href="http://bost.ocks.org/mike/path/" rel="nofollow noreferrer">http://bost.ocks.org/mike/path/</a> for creating and animating single graphs with single lines.</p> <p>And, figured out how to create multiple lines in a graph: <a href="https://stackoverflow.com/questions/8689498/drawing-multiple-lines-in-d3-js">Drawing Multiple Lines in D3.js</a></p> <p><strong>Main Issue:</strong> I am having a hard time transitioning multiple lines after I shift &amp; push in new data into my data array.</p> <p>I create the <strong><em>N</em></strong> lines with: (time: epoch time, steps forward)</p> <pre><code>var seriesData = [[{time:1335972631000, value:23}, {time:1335972631500, value:42},...], [{time:1335972631000, value:45}, {time:1335972631500, value:13},...], [{time:1335972631000, value:33}, {time:1335972631500, value:23},...}], [...],[...],... ]; var seriesColors = ['red', 'green', 'blue',...]; line = d3.svg.line() .interpolate(interpolation) .x(function(d) { return x(d.time); }) .y(function(d) { return y(d.value); }); graphGroup.selectAll(".line") .data(seriesData) .enter().append("path") .attr("class", "line") .attr("d", line) .style('stroke', function(d, i) { return seriesColors[i]; }) .style('stroke-width', 1) .style('fill', 'none'); </code></pre> <p>And am trying to update <strong><em>N</em></strong> lines with a Javascript setInterval(...) calling a method with:</p> <pre><code>graph.selectAll("path") .data(seriesData) .attr("transform", "translate(" + x(1) + ")") .attr("d", line) .transition() .ease("linear") .duration(transitionDelay) .attr("transform", "translate(" + x(0) + ")"); </code></pre> <p>It can draw the initial set perfectly, but as soon as I update the data array, the lines just disappear.</p> <hr> <p><strong><em>UPDATE 01</em></strong></p> <p>I realized that I am using epoch time values in the x (xAxis shows date:time) as my example would probably work if I used the illustrative seriesData above.</p> <p>The problem was the "transform", "translate" using x(1), x(0) was returning huge numbers, way <em>larger</em> than my graph needed to be transitioned.</p> <p>I modified the <em>update</em> <strong><em>N</em></strong> lines method (above) to use a manual approach:</p> <p><strong>New Issue:</strong> Now the graph moves left correctly, but the lines/graph <em>pops</em> back to the right, each setInterval update executes.</p> <p>It's push/shift'ing the seriesData array correctly but it doesn't keep scrolling to the left to show the new data that IS actually being drawn.</p> <pre><code>graph.selectAll("path") .data(seriesData) .attr("d", line) .attr("transform", null) .transition() .ease("linear") .duration(2000) .attr("transform", "translate(-200)"); </code></pre> <p>Another reference that I have used is this: <a href="http://bl.ocks.org/1148374" rel="nofollow noreferrer">http://bl.ocks.org/1148374</a></p> <p>Any thoughts?</p>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PTQuestion
    1. USCommunity
    1. USAugust
    plurals
    1. PL
      singulars
      1. LTLinked
    1. PL
      singulars
      1. LTLinked
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    1. VO
      singulars
      1. POd3.js - transform & transition, multiple lines
      1. This table or related slice is empty.
      1. VTApproveEditSuggestion
    2. VO
      singulars
      1. POd3.js - transform & transition, multiple lines
      1. This table or related slice is empty.
      1. VTApproveEditSuggestion
    1. COI am starting to think this has to do with my use of d3.time.scale()... for the x vs. d3.scale.linear()...?
      singulars
      1. POd3.js - transform & transition, multiple lines
      1. USAugust
 

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