3
我有這個example其中一些點隨着時間的推移隨着滑塊產生。我的版本幾乎是工作，但東西，我不能左右我的頭是這個問題： 
d3.slider和在時間軸上過濾的日期
1）顯示熱時應該從一開始就被繪製到結束 2）中表示爲實際的糖衣片/點擊時間軸上到底 3）顯示當我點擊結束時（不拖動）
日期在此功能中過濾，它應該在我的理解工作。這個例子和我的版本都使用underscore.js，我的知識非常有限。是什麼導致這個問題，如果我拖動滑塊手柄，它不會正確過濾到最後？
var dateParser = d3.time.format("%d.%m.%Y").parse;
var minDate = dateParser("01.01.2015");
var maxDate = dateParser("02.12.2015");
console.log(minDate);
var secondsInDay = 60 * 60 * 24;
d3.select('#slider3').call(d3.slider()
.axis(true)
.min(minDate)
.max(maxDate)
// .min(function(d){
// var date = dateParser(d.properties.date);
// return date;
// })
// .max(function(d){
// var date = dateParser(d.properties.date);
// return date;
// })
.step(1)
.on("slide", function(evt, value) {
newData = site_data.features.filter(function(d){
//console.log(new Date(value));
return dateParser(d.properties.date) < new Date(value);
});
console.log("New set size ", newData.length);
displaySites(newData);
})
我的全HTML看起來是這樣的，現在
<!DOCTYPE html>
<head>
<title>D3 Mapping Timeline</title>
<meta charset="utf-8">
<link rel="stylesheet" href="d3.slider.css" />
<style>
path {
fill: none;
stroke: #333;
stroke-width: .5px;
}
.land-boundary {
stroke-width: 1px;
}
.county-boundary {
stroke: #ddd;
}
.site {
opacity: 0.2;
fill: #9cf;
}
#slider3 {
margin: 20px 0 10px 20px;
width: 900px;
}
svg {
background: #eee;
}
.sphere {
fill: rgb(92, 136, 255)
}
.land {
fill: rgb(255, 239, 204)
}
.incident{
fill:#07f5e7;
opacity: 0.5;
}
.boundary {
fill: none;
stroke: rgb(224, 91, 49);
stroke-linejoin: round;
stroke-linecap: round;
vector-effect: non-scaling-stroke;
}
.state {
fill: #000;
}
.city{
fill: #de1ae8;
}
.overlay {
fill: none;
pointer-events: all;
}
</style>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="http://d3js.org/topojson.v1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
<script src="d3.slider.js"></script>
</head>
<body>
<div id="slider3"></div>
<script>
var width = 1240,
height = 720;
var projection = d3.geo.mercator()
.translate([width/2, height/2])
.scale((width - 1)/2/Math.PI);
var zoom = d3.behavior.zoom()
.scaleExtent([3, 77])
.on("zoom", zoomed);
var path = d3.geo.path()
.projection(projection);
var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height)
.append("g");
var g = svg.append("g");
var sites = svg.append("g");
svg.call(zoom)
.call(zoom.event);
d3.json("countries.topo.json", function(error, world) {
\t if (error) throw error;
g.append("path")
.datum({type: "Sphere"})
.attr("class", "sphere")
.attr("d", path);
g.append("path")
.datum(topojson.merge(world, world.objects.countries.geometries))
.attr("class", "land")
.attr("d", path);
g.append("path")
.datum(topojson.mesh(world, world.objects.countries, function(a, b) { return a !== b; }))
.attr("class", "boundary")
.attr("d", path);
//_______________________________________________________________________________________________________________________________________
//________________________________________________________________________________________________________________________________________
d3.json("germany.topo.json", function(error, ger){
if (error) throw error;
var states = topojson.feature(ger, ger.objects.states),
cities = topojson.feature(ger, ger.objects.cities);
g.selectAll(".states")
.data(states.features)
.enter()
.append("path")
.attr("class", "state")
.attr("class", function(d) { return "state " + d.id; })
.attr("d", path);
g.append("path")
.datum(cities)
.attr("d", path.pointRadius('0.05'))
.attr("class", "city");
});
});
function zoomed() {
g.attr("transform", "translate(" + d3.event.translate + ")scale(" + d3.event.scale + ")");
sites.attr("transform", "translate(" + d3.event.translate + ")scale(" + d3.event.scale + ")");
}
d3.select(self.frameElement).style("height", height + "px");
d3.json("https://raw.githubusercontent.com/RitterLean/Slider-geojson-testing/master/vorfaelle.json", function(error, data){
console.log(data.features[1].geometry.coordinates, "sad");
window.site_data = data;
});
var displaySites = function(data) {
//console.log(data)
sites.selectAll(".site")
.data(data)
.enter()
.append("circle")
.attr("class", "site")
.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", 0)
.transition().duration(400)
.attr("r", 0.25);
// "".attr""
sites.selectAll(".site")
.data(data).exit()//remove the selection which are to be removed from dataset
.transition().duration(200)
.attr("r",0)
.remove();
};
var dateParser = d3.time.format("%d.%m.%Y").parse;
var minDate = dateParser("01.01.2015");
var maxDate = dateParser("02.12.2015");
console.log(minDate);
var secondsInDay = 60 * 60 * 24;
d3.select('#slider3').call(d3.slider()
.axis(true)
.min(minDate)
.max(maxDate)
// .min(function(d){
// var date = dateParser(d.properties.date);
// return date;
// })
// .max(function(d){
// var date = dateParser(d.properties.date);
// return date;
// })
.step(1)
.on("slide", function(evt, value) {
newData = site_data.features.filter(function(d){
//console.log(new Date(value));
return dateParser(d.properties.date) < new Date(value);
});
\t \t console.log("New set size ", newData.length);
displaySites(newData);
})
);
</script>
</body>安所有其他文件可以在我的repo找到，因爲我還不知道如何正確分享在stackoverflow上。
我有三個想法從哪裏開始。也許這與主html中滑塊功能的最小值和最大值有關，但改變它只是使軸的滴答消失。它也可能是在d3.slider.js（也許是underscore.js？）內進行過濾的東西。該數據只有今年12月2日的條目，所以某些興趣點不會因爲日期顯示，所以與.min.max連接的東西可能是？那爲什麼它不像過濾一樣過濾呢？
謝謝您提前
你先生是最好的 – basedian