Javascript D3过滤+转换=失败
我有一个基于时间的可视化,它在unix时间戳上递增,并使用d3.filter根据当前时间戳获取相关项。我可以使用.stylefill color,red获取过滤后的数据以更改地图上的颜色,但我似乎无法使用.transition。添加.transition可防止.style。。。避免发生。知道发生了什么事吗Javascript D3过滤+转换=失败,javascript,d3.js,Javascript,D3.js,我有一个基于时间的可视化,它在unix时间戳上递增,并使用d3.filter根据当前时间戳获取相关项。我可以使用.stylefill color,red获取过滤后的数据以更改地图上的颜色,但我似乎无法使用.transition。添加.transition可防止.style。。。避免发生。知道发生了什么事吗 d3.json("seattle-buildings-demolished.geojson", function(error, collection) { if (error) t
d3.json("seattle-buildings-demolished.geojson", function(error, collection) {
if (error) throw error;
var transform = d3.geo.transform({point: projectPoint}),
path = d3.geo.path().projection(transform);
var feature = g.selectAll("path")
.data(collection.features)
.enter().append("path");
mapDemolitions.on("viewreset", reset);
reset();
// Reposition the SVG to cover the features.
function reset() {
var bounds = path.bounds(collection),
topLeft = bounds[0],
bottomRight = bounds[1];
svg .attr("width", bottomRight[0] - topLeft[0])
.attr("height", bottomRight[1] - topLeft[1])
.style("left", topLeft[0] + "px")
.style("top", topLeft[1] + "px");
g .attr("transform", "translate(" + -topLeft[0] + "," + -topLeft[1] + ")");
feature.attr("d", path);
}
// Use Leaflet to implement a D3 geometric transformation.
function projectPoint(x, y) {
var point = mapDemolitions.latLngToLayerPoint(new L.LatLng(y, x));
this.stream.point(point.x, point.y);
}
var time = 1262332800;
var previousTime;
var filtered = collection.features.filter(function(d){
return (d.properties.UnixIssue < 1262332800);
});
function update() {
previousTime = time;
time = time + 623328;
filtered = feature.filter(function(d){ return (d.properties.UnixIssue < time);}).transition().duration(500).style("fill-color","red");
console.log(time);
console.log(filtered);
setTimeout(update,100);
}
update();
});
});
没有填充颜色,只有填充不透明度。你需要使用fill。是知识源。谢谢-我做了更改,但仍然没有骰子。请尝试增加超时值。通过启动转换,您将取消正在运行的任何转换,因此您可能会在看到发生的情况之前覆盖转换。不幸的是,您的问题不够完整,无法进一步提供帮助。如果您的代码是一个工作示例,那就更好了。这是一个很好的原理示例。