D3滑塊停止事件

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

這裏的整體代碼是獲取滑塊之間所有月份的月度和累積數據。

但是這個「滑動」事件會在每次移動滑塊時觸發，但我實際上需要在滑塊停止時觸發事件。我怎樣才能做到這一點？

Answer 1

查看source code對於d3.slider，它有一個slideend事件。

夫婦筆記：

1. 作爲@ Qantas94Heavy提到了他的意見，你的第一行代碼被搗毀。 function (d).value語法不正確。

2. 你未來d3編碼，如果你喜歡縮進會更容易維護/可讀：

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