Javascript 使用D3和D3显示SVG元素。滑块：未捕获类型错误：。退出不是函数

我在D3.js中使用它作为我的起点，我想做与本例相同的事情。在stackoverflow的帮助下，我已经学到了很多关于D3的知识，但是现在我遇到了一个我不理解的问题。我的代码在上面，因为我还不知道（？）如何在不浪费太多空间的情况下与您共享我的文件。我前后移动滑块时出错。向右移动将产生点，但当滑块向左移动时，它们不会消失，就像示例中的那样。此外，我不确定如果我到达时间线的末尾，它们是否总是产生相同数量的点数。此图显示，当我单击立即结束时 这个屏幕截图显示了我点击/滑动到时间线的末尾。在我看来，它应该总是产生相同的数量

D3映射时间线
路径{
填充：无；
冲程：#333；
笔划宽度：.5px；
}
1.土地界线{
笔画宽度：1px；
}
.县界{
行程：#ddd；
}
.地点{
不透明度：0.2；
填充：#9cf；
}
#滑块3{
利润率：20px 0 10px 20px；
宽度：900px；
}
svg{
背景：#eee；
}
.球体{
填充：rgb（92136255）
}
.土地{
填充：rgb（255239204）
}
.事件{
填充：#07f5e7；
不透明度：0.3；
}
.边界{
填充：无；
中风：rgb（224,91,49）；
笔划线条连接：圆形；
笔划线头：圆形；
矢量效果：非缩放笔划；
}
.州{
填写：#000；
}
.城市{
填充：#de1ae8；
}
.覆盖{
填充：无；
指针事件：全部；
}
可变宽度=1240，
高度=720；
var projection=d3.geo.mercator（）
.translate（[宽度/2，高度/2]）
.刻度（（宽度-1）/2/数学PI）；
var zoom=d3.behavior.zoom（）
.scaleExtent（[3,77]）
。打开（“缩放”，缩放）；
var path=d3.geo.path（）
.投影（投影）；
var svg=d3.选择（“正文”）.追加（“svg”）
.attr（“宽度”，宽度）
.attr（“高度”，高度）
.附加（“g”）；
var g=svg.append（“g”）；
var sites=svg.append（“g”）；
调用（缩放）
.call（缩放事件）；
d3.json（“countries.topo.json”，函数（error，world）{
如果（错误）抛出错误；
g、 附加（“路径”）
.datum（{type:“Sphere”}）
.attr（“类”、“球体”）
.attr（“d”，路径）；
g、 附加（“路径”）
.datum（topojson.merge（world，world.objects.countries.geometry））
.attr（“类别”、“土地”）
.attr（“d”，路径）；
g、 附加（“路径”）
.datum（topojson.mesh（world，world.objects.countries，函数（a，b）{返回a！==b；}））
.attr（“类别”、“边界”）
.attr（“d”，路径）；
//_______________________________________________________________________________________________________________________________________
//________________________________________________________________________________________________________________________________________
d3.json（“germany.topo.json”），函数（错误，ger）{
如果（错误）抛出错误；
var states=topojson.feature（ger，ger.objects.states），
cities=topojson.feature（ger，ger.objects.cities）；
g、 选择全部（“州”）
.数据（状态.特征）
.输入（）
.append（“路径”）
.attr（“类别”、“状态”）
.attr（“类”，函数（d）{返回“状态”+d.id；}）
.attr（“d”，路径）；
g、 附加（“路径”）
.基准（城市）
.attr（“d”，路径点半径（'0.05'））
.attr（“类别”、“城市”）；
});
});
函数缩放（）{
g、 attr（“转换”、“转换”（+d3.event.translate+））比例（+d3.event.scale+））；
sites.attr（“transform”、“translate”（+d3.event.translate+））比例（+d3.event.scale+）；
}
d3.选择（self.frameElement）.style（“height”，height+“px”）；
d3.json（“https://raw.githubusercontent.com/RitterLean/Slider-geojson-testing/master/vorfaelle.json，函数（错误，数据）{
console.log（data.features[1].geometry.coordinates，“sad”）；
window.site_data=数据；
});
var displaySites=功能（数据）{
//console.log（数据）
地点。选择全部（“.site”）
.数据（数据）
.输入（）
.附加（“圆圈”）
.attr（“类”、“站点”）
.attr（“cx”，功能（d）{
var p=投影（d.几何.坐标）；
返回p[0]；
})
.attr（“cy”，函数（d）{
var p=投影（d.几何.坐标）；
返回p[1]
})
.attr（“r”，0）
.transition（）.持续时间（400）
.attr（“r”，0.23）；
//“.attr”
网站退出（）
.transition（）.持续时间（200）
.attr（“r”，0）
.remove（）；
};
var dateParser=d3.time.format（“%d.%m.%Y”）.parse；
var minDate=dateParser（“01.01.2015”）；
var maxDate=dateParser（“2015年12月31日”）；
console.log（minDate）；
var secondsInDay=60*60*24；
d3.选择（'#slider3'）。调用（d3.slider（）
.axis（真）.最小值（minDate）.最大值（maxDate）
.开启（“滑动”，功能（evt，值）{
newData=site\u data.features.filter（函数（d）{
返回日期解析器（d.properties.date）<新日期（值）；
});
log（“新设置大小”，newData.length）；
显示站点（新数据）；
})
);

滑块的问题是：

在选择时调用退出函数，如下所示：

  sites.exit()
    .transition().duration(200)
      .attr("r",0)
      .remove();

  sites.selectAll(".site")
      .data(data).exit()//remove the selection which are to be removed from dataset
    .transition().duration(200)
      .attr("r",0)
      .remove();

但应该是这样的：

  sites.exit()
    .transition().duration(200)
      .attr("r",0)
      .remove();

  sites.selectAll(".site")
      .data(data).exit()//remove the selection which are to be removed from dataset
    .transition().duration(200)
      .attr("r",0)
      .remove();

工作代码

希望这有帮助