我有我的 D3 map ，它将显示多个数据，但现在我陷入了多点触控和 d3.slider 的实现中。以及一般的触摸事件。这个video显示它现在正在做什么。我可以使用 d3 slider 生成点并在 map 上平移。这一切都是通过使用 Caress-server 实现的和 Caress-client 。触摸 table 是三星SUR40，使用Reactivision 。正如你所看到的，我得到了触摸，我可以平移，也可以缩放。但 slider 不会恢复，我不明白为什么。 d3.slider.js 稍作修改，以便它可以对 .on("drag) 使用react，而不是对 .on("click") 作出 react 。由于我没有更改其他内容，所以我我很困惑。如果您仅使用鼠标， slider 仍然可以工作，但使用 Multitouch/TUIO，您只能使用 handle 向前滑动，但不能向后滑动。
这是 slider /过滤器函数，它也在我的主 js 脚本中查找当前视口(viewport):
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下载所有数据。我很感激我能得到的每一个帮助和提示，因为这个项目对我来说非常重要。
最佳答案
slider 未居中，因此每次我向后移动时，手指都会离开 slider handle ，不再位于 handle 上。所以我在我的 css 文件中找到了这个来解决这个问题。现在也可以通过多点触控事件移动 slider
.d3-slider-horizontal .d3-slider-handle {
top: -.3em;
margin-left: -5.5em;
/*half of the slider handle*/
}
关于javascript - 使用 D3.js 和 TUIO 的触摸事件，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34751009/