X-Achse und Plot nicht synchronisiert

Ich versuche, die Timeline/X-Achse mit dem Diagramm zu synchronisieren, aber es funktioniert nicht richtig. Hat jemand eine Idee, warum die x-Achse schneller läuft als die Handlung?X-Achse und Plot nicht synchronisiert

<!DOCTYPE html> 
<html> 
    <head> 
     <meta charset="utf-8"> 

     <style> 
     body { 
      font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; 
     } 

     .graph .axis { 
      stroke-width: 1; 
     } 

     .graph .axis .tick line { 
      stroke: black; 
     } 

     .graph .axis .tick text { 
      fill: black; 
      font-size: 0.7em; 
     } 

     .graph .axis .domain { 
      fill: none; 
      stroke: black; 
     } 

     .graph .group { 
      fill: none; 
      stroke: black; 
      stroke-width: 1.5; 
     } 
     </style> 
    </head> 
    <body> 
     <div class="graph"></div> 

     <script src="http://d3js.org/d3.v3.min.js"></script> 
     <script> 
     var limit = 200, 
      duration = 300, 
      now = new Date(Date.now() - duration) 

     var width = 500, 
      height = 350 

     var groups = { 
      current: { 
       value: 0, 
       color: 'orange', 
       data: d3.range(limit).map(function() { 
        return 0 
       }) 
      }, 
      target: { 
       value: 0, 
       color: 'green', 
       data: d3.range(limit).map(function() { 
        return 0 
       }) 
      }, 
      output: { 
       value: 0, 
       color: 'grey', 
       data: d3.range(limit).map(function() { 
        return 0 
       }) 
      } 
     } 

     var x = d3.time.scale() 
      .domain([now - (limit - 2), now - duration]) 
      .range([0, width]) 

     var y = d3.scale.linear() 
      .domain([0, 100]) 
      .range([height, 0]) 

     var line = d3.svg.line() 
      .interpolate('basis') 
      .x(function(d, i) { 
       return x(now - (limit - 1 - i) * duration) 
      }) 
      .y(function(d) { 
       return y(d) 
      }) 

     // Container 
     var svg = d3.select('.graph').append('svg') 
      .attr('class', 'chart') 
      .attr('width', width) 
      .attr('height', height + 50) 

     // Bottom Axis 
     var axis = svg.append('g') 
      .attr('class', 'x axis') 
      .attr('transform', 'translate(0,' + height + ')') 
      .call(x.axis = d3.svg.axis().scale(x).orient('bottom')) 

     var paths = svg.append('g') 

     // Painting 
     for (var name in groups) { 
      var group = groups[name] 
      group.path = paths.append('path') 
       .data([group.data]) 
       .attr('class', name + ' group') 
       .style('stroke', group.color) 
     } 

     // Concrete Action 
     function tick() { 
     now = new Date() 

      // Add new values 
      for (var name in groups) { 
       var group = groups[name] 
       //group.data.push(group.value) // Real values arrive at irregular intervals 
       group.data.push(Math.random() * 100) 
       group.path.attr('d', line) 
      } 

      // Shift domain 
      x.domain([now - (limit - 2) * duration, now - duration]) 

      // Slide x-axis left 
      axis.transition() 
       .duration(duration) 
       .ease('linear') 
       .call(x.axis) 

      // Slide paths left 
      paths.attr('transform', null) 
       .transition() 
       .duration(duration) 
       .ease('linear') 
       .attr('transform', 'translate(' + x(now - (limit - 1) * duration) + ')') 
       .each('end', tick) 

      // Remove oldest data point from each group 
      for (var name in groups) { 
       var group = groups[name] 
       group.data.shift() 
      } 
     } 

     tick() 
     </script> 
    </body> 
</html>

starten Beispiel:

Verschobene Beispiel nach Ansicht Sekunden:

Es begann an: 15 und verlagert immer mehr gegen: 20

Danke für Sie r Hilfe!

Quelle

2016-12-09 Alex Tape

Da Sie die Achse wollen pro Sekunde bewegen und zeigen pro 5 Sekunden Etiketten, können Sie einstellen, wie schnell die Achse bewegt sich mit .ticks(d3.time.second, 5) wie folgt aus:

var axis = svg.append('g') 
     .attr('class', 'x axis') 
     .attr('transform', 'translate(0,' + height + ')') 
     .call(x.axis =  d3.svg.axis().scale(x).orient('bottom').ticks(d3.time.second, 5))

https://jsfiddle.net/mkaran/ejcnadp1/

hoffe, das hilft! Viel Glück.

Quelle

2016-12-09 11:04:01 mkaran

das konkrete Problem ist z.B. Der Startpunkt der Handlung ist 12:08:30. Wenn du es laufen lässt, verschiebt sich der Startpunkt zu 12: 08: 31..31..32..33 .. deine Geige hat das gleiche Problem. :( –

Hmm .. für wie lange? Ich habe es seit mehr als drei Minuten beobachtet und es verhält sich korrekt. (Auf Chrome und Firefox) Auch nach dem Umschalten Tabs, es wird fortgesetzt, wie es sollte. Die Achse verschiebt sich entsprechend Vielleicht möchten Sie vielleicht ein Bild des Problems teilen? – mkaran

Meinst du, dass der Startpunkt fest sein sollte und nicht nach der Zeit verschieben? – mkaran

X-Achse und Plot nicht synchronisiert

Antwort

Verwandte Themen