僅在長按后處理 d3 拖動事件

Question

我有處理在 d3 中拖動的代碼。

而且我只想在 1000 毫秒后發出拖動事件。（長按）

這對於移動設備來說是必要的，以獲得更好的用戶體驗。

var mouseover_node = null;
var svg = d3.select('body').append('svg').attr('width', 1000).attr('height', 1000);
var rect = svg.selectAll('rect')
  .data([0, 2, 3])
  .enter().append('rect')
  .attr('x', function(x) { return +x * 0; })
  .attr('y', function(y) {  return +y * 120; })
  .attr('width', function() { return 100; })
  .attr('height', function() { return 100; })
  .attr('fill', function(x) {  if(x == 0){return'red';}else return 'blue'; });


rect.on("mouseover", (d) => {this.mouseover_node = d})
  .on("mouseout", (d) => {this.mouseover_node = null})
  .call(d3.drag()
    .on("start", function () {
        console.log('start');
        return false;
        })
    .on("drag", function () {
        console.log('drag');
        })
    .on("end",  (sourceElement,index,svgItems) => {
        console.log('end drag with mouseover: ' + this.mouseover_node);
        })
);

我們如何在 JavaScript 中做到這一點？

Answer 1

也許在"start"和"drag"中使用Date.now()並檢查經過的時間是否大於 1000 毫秒。

var click_start, drag_start;

rect.call(
  d3.drag()
    .on("start", function () {
      console.log("start");
      click_start = Date.now();
    })
    .on("drag", function () {
      drag_start = Date.now();
      if (drag_start - click_start >= 1000) {
        console.log("drag");
      }
    })
);