Javascript 使用D3.js和TUIO触摸事件

我有我的D3地图，它将显示一些数据，现在我正忙于多点触摸和一般触摸事件的实现。这显示了它现在的功能。我可以使用d3滑块生成点，并在地图周围平移。所有这些都是通过使用和实现的。触摸台是正在使用的三星SUR40。我得到了你看到的触感，我可以平移，也可以缩放。但是滑块不会恢复，我不明白为什么。d3.slider.js经过轻微修改，因此它可以对

.on（“拖动）

而不是

.on（“单击”）

做出反应。由于我没有更改任何其他内容，所以我感到困惑。滑块仍然可以工作，但如果您仅使用鼠标，但使用多点触摸/TUIO，您只需使用手柄向前滑动，而不能向后滑动

这是滑块/过滤器函数，它也在我的主js脚本中查找当前视口：

var slider = d3.slider()
    .axis(false).min(minDate).max(maxDate).step(secondsInDay)
    .value(minDate)
    .on("slide", function(evt, value) {
      // console.log("SLIDE");
      // console.log(d3.touch);

    temp = moment(value,"x").utc().format("YYYY-MM-DD");
    tempVal = moment(temp).unix()*1000;


      if( filterCheck == 0 ){

        if( zoomCheck == 0 ){

          newDataW = site_dataW.features.filter(function(d){

            dataDate = moment(d.properties.date).utc().unix()*1000;
            // console.log("dataDate " + new Date(dataDate));
            // console.log("slidDate " + new Date(value));
            //console.log("-- " + moment(dataDate).toDate());


            if (dataDate == tempVal) {
              //console.log("Sucess");
              //console.log(moment(dataDate).toDate());
              return moment(dataDate).toDate();
            }
          });
          showWorldSite(newDataW)

        }

        else if( zoomCheck == 1 ){

          newDataG = site_dataG.features.filter(function(d){
            dataDate = moment(d.properties.date).utc().unix()*1000;
            //console.log(value);
            if (dataDate == tempVal) {
              //console.log("Sucess")
              return moment(dataDate).toDate();
            }
          })
          showGermanSite(newDataG);
        }

        else if( zoomCheck == 2 ){

          newDataS = site_dataS.features.filter(function(d){
            dataDate = d.properties.Date;
            if (dataDate == temp) {
              return moment(dataDate).toDate()
            }
          });

          showSyrianSite(newDataS);
        }

      }
//================================================================================================
//================================================================================================
//================================================================================================

      else if( filterCheck == 1 ) {
      //
        if( zoomCheck == 0 ){

          newDataW = site_dataW.features.filter(function(d){

            dataDate = moment(d.properties.date).utc().unix()*1000;

              //console.log(new Date(dataDate) < new Date(value));
              return moment(dataDate).toDate() < moment(tempVal).toDate() ;



          });
          //console.log(newDataW.length);
          showWorldSite(newDataW)

        }
      //
        else if( zoomCheck == 1 ){

          newDataG = site_dataG.features.filter(function(d){
            dataDate = moment(d.properties.date).utc().unix()*1000;
            //console.log(moment(dataDate).toDate());
            return moment(dataDate).toDate() < moment(tempVal).toDate() ;
          })
          // console.log(newDataG.length);
          // console.log(new Date(value));
          showGermanSite(newDataG);
        }

        else if( zoomCheck == 2 ){

          newDataS = site_dataS.features.filter(function(d){
            // dataDate = moment(d.properties.Date).utc().unix()*1000;
            dataDate = d.properties.Date;
            // return dpS(d.properties.Date) < new Date(value);
            // return moment(dataDate).toDate() < moment(tempVal).toDate() ;
            // return moment(dataDate).isBefore(tempVal);
            return new Date(dataDate) < new Date(temp);
          });

          showSyrianSite(newDataS);
        }

      }





    });


d3.select('#slider3').call(slider);

var slider=d3.slider（）
.axis（false）.最小值（minDate）.最大值（maxDate）.步长（SecondsSinDay）
.价值（minDate）
.开启（“滑动”，功能（evt，值）{
//控制台日志（“幻灯片”）；
//console.log（d3.touch）；
temp=力矩（值，“x”）.utc（）.格式（“YYYY-MM-DD”）；
tempVal=力矩（temp）.unix（）*1000；
如果（filterCheck==0）{
如果（zoomCheck==0）{
newDataW=site_dataW.features.filter（函数（d）{
dataDate=时刻（d.properties.date）.utc（）.unix（）*1000；
//console.log（“dataDate”+新日期（dataDate））；
//console.log（“slidedate”+新日期（值））；
//log（“--”+时刻（dataDate.toDate（））；
如果（数据日期==临时值）{
//控制台日志（“成功”）；
//log（矩（dataDate.toDate（））；
返回时刻（dataDate）.toDate（）；
}
});
showWorldSite（newDataW）
}
else if（zoomCheck==1）{
newDataG=site_dataG.features.filter（函数（d）{
dataDate=时刻（d.properties.date）.utc（）.unix（）*1000；
//console.log（值）；
如果（数据日期==临时值）{
//console.log（“suces”）
返回时刻（dataDate）.toDate（）；
}
})
showGermanSite（newDataG）；
}
else if（zoomCheck==2）{
newDataS=site_dataS.features.filter（函数（d）{
dataDate=d.properties.Date；
如果（数据日期==temp）{
返回时刻（dataDate）.toDate（）
}
});
showSyrianSite（新数据）；
}
}
//================================================================================================
//================================================================================================
//================================================================================================
else if（filterCheck==1）{
//
如果（zoomCheck==0）{
newDataW=site_dataW.features.filter（函数（d）{
dataDate=时刻（d.properties.date）.utc（）.unix（）*1000；
//console.log（新日期（dataDate）<新日期（值））；
返回时刻（dataDate.toDate（）<时刻（tempVal.toDate（）；
});
//console.log（newDataW.length）；
showWorldSite（newDataW）
}
//
else if（zoomCheck==1）{
newDataG=site_dataG.features.filter（函数（d）{
dataDate=时刻（d.properties.date）.utc（）.unix（）*1000；
//log（矩（dataDate.toDate（））；
返回时刻（dataDate.toDate（）<时刻（tempVal.toDate（）；
})
//console.log（newDataG.length）；
//console.log（新日期（值））；
showGermanSite（newDataG）；
}
else if（zoomCheck==2）{
newDataS=site_dataS.features.filter（函数（d）{
//dataDate=时刻（d.properties.Date）.utc（）.unix（）*1000；
dataDate=d.properties.Date；
//返回dpS（d.properties.Date）<新日期（value）；
//返回时刻（dataDate.toDate（）<时刻（tempVal.toDate（）；
//返回时刻（dataDate）.isBefore（tempVal）；
返回新日期（dataDate）<新日期（temp）；
});
showSyrianSite（新数据）；
}
}
});
d3.选择（'#slider3'）。调用（slider）；

---

如果你想在家里尝试，你可以下载爱抚服务器并启动它。如果你有OSX，如果你想使用你的DROID或IOS设备，你可以下载TUIODROID或TUIOpad。你可以从下载所有数据。我非常感谢能得到的每一个帮助和提示，因为这个项目对我来说非常重要。

滑块从未如此居中y次我向后移动手指离开滑块手柄，不再在手柄上。所以我在css文件中得到了这个来修复这个问题。现在也可以使用多点触控事件移动滑块了

.d3-slider-horizontal .d3-slider-handle {
    top: -.3em;
    margin-left: -5.5em;
    /*half of the slider handle*/
}