Question

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

此处的总体代码是获取滑块之间所有月份的月度和累积数据。

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

Answer 1

查看d3.slider的{{3}}，它有slideend个事件。

情侣笔记：

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

如果您缩进，则未来的d3编码将更易于维护/读取：

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

D3滑块停止事件

1 个答案: