D3 Slider Stop Event

Question

I have a D3 range slider in JS. I need to fire an event when the sliders stop at a specific point. I encoded like this:

d3.select('#slider4').call(d3.slider().axis(d3.svg.axis().ticks(6).tickFormat(function (d).value([0, 1]).on("slide", function (evt, value) { value1 = value[0], value2 = value[1]; loadChart(value1, value2); }));

function loadChart(value1, value2) {
    debugger;
    var data1 = JSON.parse('@Html.Raw(Json.Encode(Model.ChartData))');
    var low = Math.round(value1);
    var high = Math.round(value2);
    for (i = low + 1; i < high; i++) {
        debugger;
        if (i == 1) {
            freqData1 = data1.filter(function(s) {
                return s.Month == "Jan";
            });
        }
        //freqData1.forEach(function (d) { d.total = d.Bonus + d.freq.Promotions + d.freq.Merchandise + d.freq.MobileCoupon; });
        if (i == 2) {
            freqData2 = data1.filter(function(s) {
                return s.Month == "Feb";
            });
            // freqData2.forEach(function (d) { d.total = d.freq.Bonus + d.freq.Promotions + d.freq.Merchandise + d.freq.MobileCoupon; });
        }
        if (i == 3) {
            freqData3 = data1.filter(function(s) {
                return s.Month == "Mar";
            });
            //freqData3.forEach(function (d) { d.total = d.freq.Bonus + d.freq.Promotions + d.freq.Merchandise + d.freq.MobileCoupon; });
        }
        if (i == 4) {
            freqData4 = data1.filter(function(s) {
                return s.Month == "Apr";
            });
            //freqData4.forEach(function (d) { d.total = d.freq.Bonus + d.freq.Promotions + d.freq.Merchandise + d.freq.MobileCoupon; });
        }
        if (i == 5) {
            freqData5 = data1.filter(function(s) {
                return s.Month == "May";
            });
            //freqData5.forEach(function (d) { d.total = d.freq.Bonus + d.freq.Promotions + d.freq.Merchandise + d.freq.MobileCoupon; });
        }
        if (i == 6) {
            freqData6 = data1.filter(function(s) {
                return s.Month == "Jun";
            });
            //freqData6.forEach(function (d) { d.total = d.freq.Bonus + d.freq.Promotions + d.freq.Merchandise + d.freq.MobileCoupon; });
        }
    }

    var freqData = freqData1.map(function(obj, i) {
        debugger;
        var sum = {};
        for (var key in obj) {
            sum[key] = typeof obj[key] === 'number' ? obj[key] + freqData2[i][key] + freqData3[i][key] + freqData4[i][key] + freqData5[i][key] + freqData6[i][key] : obj[key];
        }
        return sum;
    });

    document.getElementById("dashboard").innerHTML = "";
    dashboard('#dashboard', freqData);
}

Here's a common code - get monthly and cumulative data for all months between the sliders.

But this “slide” event is triggered every time the slider is moved, but I really needed to fire the event when the slider stops. How can i achieve this?

Answer 1

Looking at the source code for d3.slider, it has an event slideend.

Pair notes:

• As @ Qantas94Heavy mentions in his comment, your first line of code is exposed. function (d).value- wrong syntax.

• d3 , :

  d3.select('#slider4')
    .call(
      d3.slider()
        .axis
    ) // more code here...