非常感谢任何见解。我把自己打结成了一个相对d3的新人。
我有一张美国地图,我在其上放置标记,在csv文件中显示三组不同的数据。我有三个可以检查的单选按钮,一个"显示"单击时运行render()的按钮。我已尝试对其进行设置,以便数据通过输入,更新和退出自动更新,但它无法正常工作。它似乎留下以前的数据,或者在某些序列中,组合或减去数据。我完全迷茫了自己。我感谢您的帮助。这是代码。如果有任何我可以添加的内容请告诉我。
var heights = d3.select("#heights");
var lengths = d3.select("#lengths");
var volumes = d3.select("#volumes");
var show = d3.select('#show');
var dataset;
heights.on('click', function(){
dataset = "./public/assets/data/us_heights_test.csv";
});
lengths.on('click', function(){
dataset = "./public/assets/data/us_lengths_test.csv";
});
volumes.on('click', function(){
dataset = "./public/assets/data/us_volumes_test.csv";
});
show.on('click', function(){
render();
});
var render = function(){
d3.csv(dataset, function(error, latlon){
latlon.forEach(function(d) {
d.Lat = +d.Lat;
d.Long = +d.Long;
});
var circles = landmarks.selectAll("circle")
.data(latlon);
circles
.data(latlon)
.enter()
.append("circle")
.attr({
'fill': '#F00',
'r': 3,
'class': 'dot'
})
.each(function(d) {
var sel = d3.select(this);
var xy = projection([d.Long, d.Lat]);
if(typeof xy[0]==='undefined') {
console.log("undefined");
} else {
sel.attr("cx", xy[0]);
sel.attr("cy", xy[1]);
}
})
.style({
'opacity': 0.5
})
.on("mouseover", details);
circles
.exit()
.remove();
});
};