1

I am trying to use the following code taken from this example to pan my time-series line-chart sideways, as new data is added to the graph:

       d3.select("path")
            .datum(globalData)
            .attr("class", "line")
            .attr("d", valueline(globalData))
        .transition()
            .ease("linear")
            .attr("transform", "translate(" + x(-dx) + ")");

But this does't work - my line disappears. I am trying to understand what the units of the translate vector need to be for this to work. In my case dx would be the difference between the first and last x-values of the new data.

rex
  • 3,133
  • 6
  • 35
  • 62
  • The units are screen pixels in the default coordinate system. – Lars Kotthoff May 25 '14 at 19:49
  • Thanks Lars, how can I use the. x() axis function to get the correct translatation ector that corresponds the the range of the new x-axis time values? Ie pan sideways to show the new data of the time-series – rex May 25 '14 at 20:06
  • I'm not sure what you mean, but the range of the scale would be whatever you set in `.range()`. – Lars Kotthoff May 25 '14 at 20:09
  • I want to understand how a value in x (an increment dx) would convert to the units of the translation vector. – rex May 25 '14 at 20:46
  • That's what the scale `x` is for. It translates domain to range values. – Lars Kotthoff May 25 '14 at 20:48
  • Thanks @LarsKotthoff yeah that's what I thought but it only seems to be working the first update :/ I will probably post a new question to figure out exactly what I want to do. If you'd like to post answer re the translation vector I can accept it. – rex May 25 '14 at 21:23
  • Well if you could elaborate on what you actually want to do I may be able to help you with that. – Lars Kotthoff May 25 '14 at 21:38
  • Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/54398/discussion-between-armen-safieh-garabedian-and-lars-kotthoff). – rex May 25 '14 at 21:49

1 Answers1

2

The units used in translate are screen pixels in the default coordinate system.

Lars Kotthoff
  • 107,425
  • 16
  • 204
  • 204
  • Thanks @LarsKotthoff, I have included a longer questions (with fiddle) putting this question more in context. I would appreciate it if you could have a look :) http://stackoverflow.com/questions/23843775/d3-js-time-series-line-chart-with-real-time-data-panning-and-zooming – rex May 29 '14 at 20:18