I have followed the instructions at: / for creating and animating single graphs with single lines.

And, figured out how to create multiple lines in a graph: Drawing Multiple Lines in D3.js

Main Issue: I am having a hard time transitioning multiple lines after I shift & push in new data into my data array.

I create the N lines with: (time: epoch time, steps forward)

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');

And am trying to update N lines with a Javascript setInterval(...) calling a method with:

graph.selectAll("path")
    .data(seriesData)
    .attr("transform", "translate(" + x(1) + ")")
    .attr("d", line)
      .transition()
    .ease("linear")
    .duration(transitionDelay)
    .attr("transform", "translate(" + x(0) + ")");

It can draw the initial set perfectly, but as soon as I update the data array, the lines just disappear.

---

UPDATE 01

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.

The problem was the "transform", "translate" using x(1), x(0) was returning huge numbers, way larger than my graph needed to be transitioned.

I modified the update N lines method (above) to use a manual approach:

New Issue: Now the graph moves left correctly, but the lines/graph pops back to the right, each setInterval update executes.

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.

graph.selectAll("path")
        .data(seriesData)
        .attr("d", line)
        .attr("transform", null)
          .transition()
        .ease("linear")
        .duration(2000)
        .attr("transform", "translate(-200)");

Another reference that I have used is this:

Any thoughts?

I have followed the instructions at: http://bost.ocks/mike/path/ for creating and animating single graphs with single lines.

And, figured out how to create multiple lines in a graph: Drawing Multiple Lines in D3.js

Main Issue: I am having a hard time transitioning multiple lines after I shift & push in new data into my data array.

I create the N lines with: (time: epoch time, steps forward)

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');

And am trying to update N lines with a Javascript setInterval(...) calling a method with:

graph.selectAll("path")
    .data(seriesData)
    .attr("transform", "translate(" + x(1) + ")")
    .attr("d", line)
      .transition()
    .ease("linear")
    .duration(transitionDelay)
    .attr("transform", "translate(" + x(0) + ")");

It can draw the initial set perfectly, but as soon as I update the data array, the lines just disappear.

---

UPDATE 01

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.

The problem was the "transform", "translate" using x(1), x(0) was returning huge numbers, way larger than my graph needed to be transitioned.

I modified the update N lines method (above) to use a manual approach:

New Issue: Now the graph moves left correctly, but the lines/graph pops back to the right, each setInterval update executes.

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.

graph.selectAll("path")
        .data(seriesData)
        .attr("d", line)
        .attr("transform", null)
          .transition()
        .ease("linear")
        .duration(2000)
        .attr("transform", "translate(-200)");

Another reference that I have used is this: http://bl.ocks/1148374

Any thoughts?

• javascript
• d3.js
• graph
• set

Share Improve this question Follow edited May 23, 2017 at 12:16 CommunityBot 111 silver badge asked May 1, 2012 at 21:00 AugustAugust 71844 gold badges1212 silver badges2121 bronze badges 3

• I am starting to think this has to do with my use of d3.time.scale()... for the x vs. d3.scale.linear()...? – August Commented May 2, 2012 at 13:59
• Did you ever solve this? If so please post your solution. – Union find Commented Jan 19, 2015 at 1:24
• I ended up making three separate graph's with a single line each. Then I use CSS to stack the graph ID's on top of each other. It was easier to manage and to reuse. Especially if I wanted it to be smooth.. – August Commented Jan 20, 2015 at 3:31

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 1

One thing that jumps out at me as a possibility for error is the data calls that are used, the initial is

.data(seriesData)

the update uses

.data([seriesData])

which may cause issues, but its hard to tell without seeing the rest of what is going on, can you perhaps put it on jsfiddle?