Skip to content Skip to sidebar Skip to footer
Home / D3.js / Javascript / Jquery / Python

D3 Realtime Graphing: Slide From Right&shift Data As Data Length Exceeds Limit Transition Is Not Working

Post a Comment
usign bottle webframework for backend and d3 graphing for frontend. my server.py content is as following from bottle import get,template,run,route,Bottle,static_file from bottle.e

Solution 1:

This is bizarre, your code should work. It's like d3 is not picking up the transition.attr and applying it. Your best option may be to set up your own interpolater: 

var startTrans = 'translate(0,0)';
var endTrans = 'translate(' + (-x(duration)) + ',0)';
var transInterp = d3.interpolateString(startTrans , endTrans); 
...
path 
  .attr("d", valueline1(data1))
  .attr("transform", null)
  .transition()
  .duration(moveDuration)
  .ease("linear")
  .attrTween('transform', function (d) {
    return transInterp;
  });

Full working code:

<!DOCTYPE html><metacharset="utf-8"><style>
  svg {
    font: 10px sans-serif;
  }
  
  .line {
    fill: none;
    stroke: #000;
    stroke-width: 1.5px;
  }
  
  .axis path,
  .axis line {
    fill: none;
    stroke: #000;
    shape-rendering: crispEdges;
  }
</style><body><scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script><divid="graph1"></div><scripttype="text/javascript"src="http://code.jquery.com/jquery-1.7.1.min.js"></script><scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script><script>var margin = {
        top: 5,
        right: 10,
        bottom: 10,
        left: 70
      },
      width = 600 - margin.left - margin.right,
      height = 250 - margin.top - margin.bottom;

    var data1;
    var x, y1, xAxis1, yAxis1, update;
    var duration = 1000;
    var moveDuration = 1000;
    // Parse the date / timevar totalSeconds = 60;
    var n = 10; //totalSeconds;var limit = n;
    duration = 1000;
    x = d3.time.scale()
      .domain([0, ((n - 1) * duration)])
      .range([0, width]);
    var valueline1 = d3.svg.line()
      .x(function(d, i) {
        returnx(i * duration);
      })
      .y(function(d, i) {
        returny1(d);
      })
      .interpolate("monotone");

    // Set the ranges
    data1 = [0];


    y1 = d3.scale.linear().range([height, 0])
      .domain([0, 1000]);
    xAxis1 = d3.svg.axis().scale(x)
      .orient("bottom")
      .ticks(d3.time.seconds, 1.0)
      .tickFormat(d3.time.format('%M:%S'))
      .innerTickSize(-height);
    yAxis1 = d3.svg.axis().scale(y1)
      .innerTickSize(-width)
      .outerTickSize(0)
      .tickPadding(10)
      .orient("left").ticks(10);
    var svg = d3.select("#graph1")
      .append("svg")
      .attr("width", width + margin.left + margin.right)
      .attr("height", height + margin.top + margin.bottom)
      .append("g")
      .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
    svg.append("defs").append("clipPath")
      .attr("id", "clip")
      .append("rect")
      .attr("width", width)
      .attr("height", height);

    var xAxisLine = svg.append("g") // Add the X Axis
      .attr("class", "x axis")
      .attr("transform", "translate(" + width + "," + height + ")")
      .call(xAxis1);

    svg.append("g") // Add the Y Axis
      .attr("class", "y axis")
      .call(yAxis1);

    var path = svg.append("g")
      .attr("clip-path", "url(#clip)")
      .append("path")
      .data(data1)
      .attr("class", "line")
      .attr("transform", "translate(" + (width) + ")")
      .attr("d", valueline1(data1)); // Add the valueline path.var random = d3.random.normal(0, 50);
    var i = 0;
    var shifter = 0;
    var startTrans = 'translate(0,0)';
    var endTrans = 'translate(' + (-x(duration)) + ',0)';
    var transInterp = d3.interpolateString(startTrans, endTrans);

    functionupdate(val) {
      var svg1 = d3.select("#graph1");
      i = i + 1;
      shifter = 0;
      var val = JSON.parse(val);
      data1.push(val);

      if (i >= limit) {
        shifter = x(-duration);
        var x_axis_scale = d3.time.scale()
          .domain([(i + 1 - limit) * duration, ((n - 1 + (i + 1 - limit)) * duration)])
          .range([0, width]);

        svg1.select(".x.axis")
          .attr("transition", null)
          .transition()
          .duration(moveDuration)
          .ease("linear")
          .call(d3.svg.axis().scale(x_axis_scale)
            .orient("bottom")
            .ticks(d3.time.seconds, 1.0)
            .tickFormat(d3.time.format('%M:%S'))
            .innerTickSize(-height)
            //.orient("bottom")//.ticks(d3.time.seconds,1.0)//.tickFormat(d3.time.format('%M:%S'))//.innerTickSize(-height)
          );

        
        path 
          .attr("d", valueline1(data1))
          .attr("transform", null)
          .transition()
          .duration(moveDuration)
          .ease("linear")
          .attrTween('transform', function (d) {
            return transInterp;
          });

        data1.shift();
        // Make the changes
      } else {
        shifter = width - x(i * duration);
        svg1.select(".x.axis")

        .transition()
          .duration(moveDuration)
          .ease("linear")
          .attr("transform", "translate(" + (shifter) + "," + (height) + ")");

        //	svg1.select(".line")   // change the line
        path.attr("d", valueline1(data1))
          .transition()
          .duration(moveDuration)
          .ease("linear")
          .attr("transform", "translate(" + (shifter) + ")"); //.attr("transform","translate("+(shifter)+")");// Make the changes
      }

    }

    setInterval(function() {
      update(Math.random() * 1000);
    }, 1000);
  </script>

You may like these posts

Post a Comment for "D3 Realtime Graphing: Slide From Right&shift Data As Data Length Exceeds Limit Transition Is Not Working"