Slider not updating the SVG view in d3

[Vaibhav Kumar]

wn vote
favorite

I'm trying to implement a jquery slider in d3 following this link. The example is generating data of some random numbers while my data is in the below format:

{storeid: 5722646637445120, peoplesum: 87, date: "2018-06-03"}
{storeid: 5722646637445120, peoplesum: 90, date: "2018-06-04"}
{storeid: 5722646637445120, peoplesum: 114, date: "2018-06-05"}

I'm able to trigger event gets triggered when i move my slider but the changing values are not getting reflected on the x axis. So that mean my view is not updating the SVG correctly which is my assumption. I could be wrong here as well.

My x axis should have the date range and y should be peoplesum and it could be a single or a multiline graph.

private initSvg() {
    d3.select("svg").remove();
    this.svg = d3.select("#d3Id")
    .append("svg")
        .attr("width", this.width + this.margin.left + this.margin.right)
        .attr("height", this.height + this.margin.top + this.margin.bottom)
    .append("g")
        .attr("transform", 
              "translate(" + this.margin.left + "," + this.margin.top + ")")
     .attr("stroke-width", 2);
  }
  private initAxis() {
    // Parse the date / time
    var parseDate = timeParse("%b %Y");
    this.formatTime = timeParse("%e %B");

    // Set the ranges
    this.x = d3Scale.scaleTime().range([0, this.width]);
    this.y = d3Scale.scaleLinear().range([this.height, 0]);
  }
  private drawAxis() {
      var X = this.x;
      var Y = this.y;
      this.xAxis = d3.axisBottom(this.x)
          .ticks(5);
      this.yAxis = d3.axisLeft(this.y)
          .ticks(5);
      // Define the line
      this.priceline = d3Shape.line()
          .x(function (d) { return X(new Date(d['date'])); })
          .y(function (d) { return Y(d['peoplesum']); });
  }
  private drawLine() {
    if ( this.data[0]['d3_parameter_maker'] === true)
      {
       this.x.domain([0, d3.max(this.data, function (d) { return d['date']; })]); 
      }
      else if ( this.data[0]['d3_parameter_maker'] === undefined)
      {
        console.log("aksdad")
      var mindate = new Date(this.dashboard_date['startTime']),
          maxdate = new Date(this.dashboard_date['endTime']);
      this.x.domain([mindate,maxdate]);
      }

      // Scale the range of the data
      var svgVar = this.svg;
      var pricelineVar = this.priceline;
      var margin = this.margin;
      var height = this.height;
      let thisObj = this;
      this.mouseOver = [];
      let X = this.x;
      let Y = this.y;
      if ( this.mouseFlag < 0) {
        for ( let i = 0; i < this.peopleInSumArr.length; i++) {
            this.mouseOver[i] = true;
        }
      } else {
          for (let i = 0; i < this.peopleInSumArr.length; i++) {
              if (i !== this.mouseFlag) {
                this.mouseOver[i] = false;
              }
          }
          this.mouseOver[this.mouseFlag] = true;
      }
      this.y.domain([0, d3.max(this.data, function (d) { return d['peoplesum']; })]);
      // Nest the entries by symbol
      var dataNest = d3.nest()
          .key(function (d) { return d['storeid']; })
          .entries(this.data);
      // set the colour scale
      var color = d3.scaleOrdinal(d3.schemeCategory10);
      var legendSpace = this.width / dataNest.length; // spacing for the legend
      var div1 = d3.select("body").append("div")
          .attr("class", "tooltip")
          .style("opacity", 0);
      dataNest.forEach(function (data, i) {
          thisObj.svg.append("path")
              .attr("class", "line")
              .style("fill", "none")
              .attr("d", thisObj.priceline(data.values))
              .attr('opacity', thisObj.mouseOver !== undefined && thisObj.mouseOver[i] === true ? 1 : 0.2)
              .style('cursor', 'pointer')
              .style("stroke", function () { // Add the colours dynamically
                  return data['color'] = color(data.key);
              })
              .attr("stroke-width", 3)
              .on('click', function () { // on mouse in show line, circles and text
                  thisObj.mouseFlag = i;
                  thisObj.initSvg();
                  thisObj.initAxis();
                  thisObj.drawAxis();
                  thisObj.drawLine();
              });
          // Add the scatterplot
          thisObj.svg.selectAll("dot")
              .data(data.values)
              .enter().append("circle")
              .attr("r", 5)
              .attr("cx", function (d) { return thisObj.x(new Date(d.date)); })
              .attr("cy", function (d) { return thisObj.y(d.peoplesum); })
              .on("mouseover", function (d) {
                  console.log('d', d);
                  div1.transition()
                      .duration(200)
                      .style("opacity", .9);
                  // tslint:disable-next-line:no-unused-expression
                  div1.html("<b>Date: </b>" + d.date + "<br/>" + "<b>Sum: </b>" + d.peoplesum.toFixed(2))
                      .style('position', 'absolute')
                      .style("left", (d3.event.pageX) + "px")
                      .style("top", (d3.event.pageY - 28) + "px")
                      .style('text-align', 'center')
                      .style('width', '100px')
                      .style('height', '30px')
                      .style('padding', '2px')
                      .style('font', '12px sans-serif')
                      .style('background-color', 'lightsteelblue')
                      .style('border', '0px')
                      .style('border-radius', '8px')
                      .style('cursor', 'pointer')
                      .style('pointer-events', 'none');
              })
              .on("mouseout", function (d) {
                  div1.transition()
                      .duration(500)
                      .style("opacity", 0);
              });

          thisObj.svg.append("text")
              .attr("x", (legendSpace / 2) + i * legendSpace)  // space legend
              .attr("y", height + (margin.bottom / 2) + 5)
              .attr("class", "legend")    // style the legend
              .style('cursor', 'pointer')
              .style("fill", function () { // Add the colours dynamically
                  return data['color'] = color(data.key);
              })
              .text(data.key)
              .attr("stroke-width", 3)
              .on('click', function () { // on mouse in show line, circles and text
                  thisObj.mouseFlag = i;
                  thisObj.initSvg();
                  thisObj.initAxis();
                  thisObj.drawAxis();
                  thisObj.drawLine();
              });
      });
      // Add the X Axis
      this.svg.append("g")
          .attr("class", "axis")
          .attr("transform", "translate(0," + this.height + ")")
          .call(d3.axisBottom(this.x));

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


    // For zomming the dates on x axis by incrementing the dates by a step value
    function zoom(begin, end) {  
    thisObj.x.domain([begin, end - 1]);
    var t = thisObj.svg.transition().duration(0);
    var size = moment(moment(end).toDate()).diff(moment(begin).toDate(), 'days');
    console.log("size",size)
    var step = size / 10;
    var ticks = [];
    for (var i = 0; i <= 10; i++) {
       var someDate = new Date(moment(moment(begin).toDate()).format('YYYY-MM-DD'));
       var numberOfDaysToAdd = Math.floor(step * i);
       ticks.push(moment(moment(someDate.setDate(someDate.getDate() + numberOfDaysToAdd)).toDate()).format('YYYY-MM-DD'));
    }
    console.log("tick",ticks)
    thisObj.xAxis.tickValues(ticks);
    t.select(".x.axis").call(d3.axisBottom(thisObj.x));

    t.select('.path').attr("d", thisObj.data);
  }
  //To set the range and call zoom function to strech the axis
  $(function() {
        $( "#slider-range" ).slider({
            range: true,
           min: new Date(mindate).getTime() / 1000,
      max: new Date(maxdate).getTime() / 1000,
      step: 86400,
             values: [ new Date(mindate).getTime() / 1000, new Date(maxdate).getTime() / 1000 ],
            slide: function( event, ui ) {
              console.log("ui.values[0]",ui.values)

              var begin = d3.min([(new Date(ui.values[ 0 ] *1000).toDateString() ), thisObj.data.length]);
              var end = d3.max([(new Date(ui.values[ 1 ] *1000).toDateString() ), 0]);
              console.log("begin:", moment(begin).toDate(), "end:", moment(end).format('yyyy-mm-dd'), thisObj.data);

              zoom(begin, end);
            }
        });
    });

    }
}