Jquery Slider Not Working On D3 Multiples, But Not Returning Error Either

I'm trying to add a jQuery range slider to the main chart on a page that contains small multiples of area charts, but the slider does not slide, and the charts do not transition. I

Solution 1:

Here you go buddy! Plunker

Made a lot of changes to the code. Here is a diff-check of our codes:

Code Difference

Relevant changes:

functionrerenderAreaChart(selectedState, dataset, svgHook, size, begin, end) {
  var totalTicksX = Math.round(size.w / 60),
    totalTicksY = Math.round(size.h / 40);

  xAxis.ticks(totalTicksX);
  yAxis.ticks(totalTicksY);

  yScale.range([padding.top, size.h - padding.bottom]);

  xScale.domain([begin, end]);

  var filtered_indices = [];
  dataset[0].values.forEach(function(k, i) {
    if (k.x >= begin && k.x <= end) {
      filtered_indices.push(i);
    }
  });
  var max = d3.max(filtered_indices, function(idx) {
    return d3.sum(dataset, function(d) {
      return d.values[idx].y;
    })
  });
  yScale.domain([max, 0]);

  d3.select(svgHook).select('svg.state.' + selectedState).select('.x.axis')
    .transition().duration(50).call(xAxis).selectAll(".tick text")
    .call(wrap, 0);

  d3.select(svgHook).select('svg.state.' + selectedState).select('.y.axis')
    .transition().duration(50).call(yAxis);

  dataset.forEach(function(d) {
    d.values.forEach(function(v, idx) {
      v.hidden = filtered_indices.indexOf(idx) === -1;
    })
  });
  stack(dataset);

  d3.select(svgHook).select('svg.state.' + selectedState).select('g.paths').selectAll("path")
    .attr("clip-path", "url(#clip)")
    .attr('d', function(d) {
      return area(d.values.filter(function(k) {
        return k.x >= begin && k.x <= end;
      }));
    });
}

Take a look at the jQuery slider too. I've missed commenting the code which I'll do soon and update the link. Please go through the code and let me know if find any bugs or anything that isn't understandable.

And I'm sorry for the delay as I lost all the code once (didn't save it), had to rewrite it today.

One thing I would like you to make note of is it's better to use "style" instead of "attr" (attribute) for stylings such as "fill", "stroke" etc. I've changed those too.

Hope this helps. :)