D3 滑块停止事件答案

【问题标题】：D3 Slider stop eventD3 滑块停止事件
【发布时间】：2015-06-12 12:44:16
【问题描述】：

我在 JS 中有一个 D3 范围滑块。当滑块停在一对特定的点时，我需要触发一个事件。我是这样编码的：

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);
}

这里的整体代码是获取滑块之间所有月份的月度和累积数据。

但是每次我移动滑块时都会触发这个“幻灯片”事件，但实际上我需要在滑块停止时触发该事件。我怎样才能做到这一点？

【问题讨论】：

您似乎错误地复制粘贴了第一行——您介意修复它吗？谢谢。
你能告诉我正确的语法吗？

标签： javascript jquery svg d3.js

【解决方案1】：

查看source code 的d3.slider，它有一个slideend 事件。

情侣笔记：

正如@Qantas94Heavy 在他的评论中提到的，你的第一行代码被破坏了。 function (d).value 语法不正确。

如果你像这样缩进，你未来的d3 编码会更易于维护/可读：

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

【讨论】：