我正在制作世界地图,并尝试从绿色更改为红色,这是按住鼠标时单击的国家/地区的颜色。我可以通过多次单击更改颜色,但是当我尝试添加while循环时,它只是冻结了。你能帮我吗?另外,如何保持颜色从绿色到红色的循环?这意味着一旦它达到红色并且我一直躲下鼠标,它就会变成绿色等等......这是它的一个小提琴
var color = d3.scale.linear().domain([0, 50]).range(["green", "red"]);
var pas = [];
var ismousedown = -1;
country
.on("mousemove", function(d, i) {
var mouse = d3.mouse(svg.node()).map(function(d) {
return parseInt(d);
});
tooltip.classed("hidden", false)
.attr("style", "left:" + (mouse[0] + offsetL) + "px;top:" + (mouse[1] + offsetT) + "px")
.html(d.properties.name);
})
.on("mouseout", function(d, i) {
tooltip.classed("hidden", true);
})
.on("mouseup", function(d, i) {
ismousedown = 0;
})
.on("mouseout", function(d, i) {
tooltip.classed("hidden", true);
})
.on("mousedown", function(d, i) {
ismousedown = 1;
while (ismousedown == 1) {
if (pas[d.id]) {
pas[d.id]++;
} else {
pas[d.id] = 1;
}
d3.select(this)
.classed("active", false)
.style("fill", function(d, i) {
return color(pas[d.id]);
return d.properties.color;
});
}
});
我修改了您的解决方案以使用 setInterval()。这将每 N 毫秒自动运行一个函数。在此示例中,当鼠标按下时,颜色更新代码将每 10 毫秒运行一次(您可以在鼠标按下函数中进行调整)。释放鼠标时,将清除间隔,使其不再运行。
更新了JSFiddle(注意:我还在函数顶部添加了一些变量)
.on("mousedown", function(d,i) {
var that = this;
ismousedown = true;
colorInterval = window.setInterval(function () {
// ...
}, 10); // <== runs every 10 milliseconds
})
.on("mouseup", function(d,i) {
window.clearInterval(colorInterval);
});
您正在使用一个循环,您在之前设置了条件变量,因此它始终为"1"并卡住。您根本不需要 mousedown 变量,因为您的代码已经在.on("mousedown")
状态下运行。我还实现了一个有效的while循环。但是颜色变化是如此之快,以至于你看不到变化的发生。
我建议:
.on("mousedown", function(d, i) {
var counter = 0;
var max_counter = 255;
while (counter < max_counter) {
if (pas[d.id]) {
pas[d.id]++;
} else {
pas[d.id] = 1;
}
d3.select(this)
.classed("active", false)
.style("fill", function(d, i) {
return color(pas[d.id]);
return d.properties.color; });
counter++;
}
});