Question

我有我的D3地图，它会显示几个数据，现在我仍然坚持实现多点触控和d3.slider以及一般触摸事件。这个video显示了它现在所做的事情。我可以使用d3滑块生成点并在地图上平移。所有这些都是通过使用Caress-server和Caress-client来实现的。触摸桌是使用Reactivision的三星SUR40。如果你看到我可以平移，我也可以进行缩放。但滑块不会恢复，我不明白为什么。 d3.slider.js略有修改，因此它可以对.on("drag)而不是.on("click")作出反应。因为我没有改变别的我感到困惑。如果您只使用鼠标但是使用Multitouch / 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);

如果您想在家中试用，可以下载Caress Server并启动它。 Tongseng如果你有OSX，如果你想使用你的DROID或IOS设备，你可以下载TUIODROID或TUIOpad。您可以从my repo下载所有数据。我很感激我能得到的每一个帮助和提示，因为这个项目对我来说非常重要。

Answer 1

滑块没有居中，所以每当我向后移动时，手指离开滑块手柄，不再在手柄上。所以我在我的css文件中得到了这个来解决这个问题。现在也可以使用多点触控事件移动滑块

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

使用D3.js和TUIO触摸事件

1 个答案: