根据D3.js中的视口标志删除多个数据
我有一张地图，我正在检查视口有哪些缩放和平移，所以我可以显示信息。就我而言，圈子在世界上/在德国/叙利亚上空。
主要部分看起来像这样我正在检查地图的哪个部分被看到以及缩放级别如何
var minZoomTresholdCountry = 15
var minXG = -462,
maxXG = -552
minYG = -29,
maxYG = -98;
var minXS = -647,
maxXS = -544,
minYS = -104,
maxYS = -164;
var zoomCheck = 0, //zoomcheck which zoom level? Which country is focussed //0 = WORLD 1 = GER 2 = SYR
filterCheck = 1; //how is POI diplayed? Per day or over TIME? 0 per day 1 over Time
var tip = d3.tip()
.attr('class', 'd3-tip')
.html(function(d) { return d.properties.description })
.offset([0, 3]);
svg.call(tip)
function zoomed() {
g.attr("transform", "translate(" + d3.event.translate + ")scale(" + d3.event.scale + ")");
sites.attr("transform", "translate(" + d3.event.translate + ")scale(" + d3.event.scale + ")");
var translate = zoom.translate();
var translateX = translate[0]/zoom.scale();
var translateY = translate[1]/zoom.scale();
// console.log(translate[0]/zoom.scale() + " " + translate[1]/zoom.scale());
// console.log(zoom.scale());
if (zoom.scale()<minZoomTresholdCountry) {
//console.log("WELT");
zoomCheck = 0;
// if( siteDataG ){
// siteDateG.remove();
// }
// if(siteDataS){
// siteDataS.remove();
// }
}
else if(zoom.scale() >= minZoomTresholdCountry
&& translateX< minXG && translateX > maxXG
&& translateY<minYG && translateY>maxYG){
//console.log("DE");
zoomCheck = 1;
}
else if(zoom.scale() >= minZoomTresholdCountry
&& translateX> minXS && translateX < maxXS
&& translateY<minYS && translateY>maxYS){
//console.log("SYR");
zoomCheck = 2;
}
else{
zoomCheck = 0;
}
//console.log(zoomCheck)
if(zoomCheck == 0){
showSmth();
}
}
d3.json("data/vorfaelle.json", function(error, data){
window.site_dataG = data;
});
d3.json("data/syria_sorted.json", function(error, data){
window.site_dataS = data;
});
d3.json("data/newtest.json", function(error, data){
window.site_dataW = data;
});
d3.json("data/isil.en.json", function(error, data){
window.site_dataB = data;
});
dpG = d3.time.format("%d.%m.%Y").parse;
dpS = d3.time.format("%Y-%m-%d").parse;
//
// var minDate = dpG("01.01.2015");
// var maxDate = dpG("31.12.2015");
var minDate = moment.utc("2015-01-01").toDate();
var maxDate = moment.utc("2016-01-01").toDate();
var secondsInDay = 1000 * 60 * 60 * 24; //DAYS
var slider = d3.slider()
.axis(true).min(minDate).max(maxDate).step(secondsInDay)
.on("slide", function(evt, value) {
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);
function showWorldSite(data){
var siteDataW = sites.selectAll(".siteW")
.data(data);
siteDataW
.enter()
.append("circle")
.attr("class", "siteW")
.attr("cx", function(d) {
var p = projection(d.geometry.coordinates);
return p[0];
})
.attr("cy", function(d) {
var p = projection(d.geometry.coordinates);
return p[1]
})
.attr("r", 6)
.transition().duration(70)
.attr("r", 4);
siteDataW.exit()//remove the selection which are to be removed from dataset
.transition().duration(10)
.attr("r",0)
.remove();
}
function showGermanSite(data){
var sitedataG = sites.selectAll(".siteG")
.data(data);
sitedataG
.enter()
.append("circle")
.attr("class", "siteG")
.attr("cx", function(d) {
var p = projection(d.geometry.coordinates);
return p[0];
})
.attr("cy", function(d) {
var p = projection(d.geometry.coordinates);
return p[1]
})
.on("click", tip.show)
.on('mouseout', tip.hide)
.attr("r", 1.25)
.transition().duration(70)
.attr("r", 0.25);
sitedataG.exit()
//.transition().duration(200)
.attr("r",0)
.remove();
}
function showSyrianSite(data){
var radScale = d3.scale.linear()
.domain(d3.extent(data, function(d){
return d.properties.Value }))
.range([0.1,.5]);
var siteDataS = sites.selectAll(".siteS")
.data(data);
siteDataS
.enter()
.append("circle")
.attr("class", "siteS")
.attr("cx", function(d) {
var p = projection(d.geometry.coordinates);
return p[0];
})
.attr("cy", function(d) {
var p = projection(d.geometry.coordinates);
return p[1]
})
.attr("r", function(d){
return 1.75 * radScale(d.properties.Value)
})
.transition().duration(70)
.attr("r", function(d){
return radScale(d.properties.Value)
});
siteDataS.exit()
//.transition().duration(10)
.attr("r",0)
.remove();
}
function showSmth(){
console.log("Here will be something soon");
}
如果不使用数据（在视口中/不在缩放视图中），是否有一种有效的方法可以删除数据？当我在zoom函数中执行类似这样的操作时触发zoomCheck等于0等的情况时，我可以删除圆圈：
var sitedataG, sitedataS, sitedataW;
if (zoom.scale()<minZoomTresholdCountry) {
zoomCheck = 0;
sitedataG.remove();
sitedataS.remove();
}
else if(zoom.scale() >= minZoomTresholdCountry
&& translateX< minXG && translateX > maxXG
&& translateY<minYG && translateY>maxYG){
zoomCheck = 1;
sitedataW.remove();
sitedataS.remove();
}
else if(zoom.scale() >= minZoomTresholdCountry
&& translateX> minXS && translateX < maxXS
&& translateY<minYS && translateY>maxYS){
//console.log("SYR");
zoomCheck = 2;
sitedataW.remove();
sitedataG.remove();
}
但这不是正确的解决方案，它也不是真的很糟糕（错误，因为当然并不总是创建siteData所以它无法删除）
如果您想查看我的完整代码，请随时使用this
0 个答案:
没有答案
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？