javascript - d3在setinterval动画完成时更改按钮样式
问题描述
我从这个 d3 js 示例d3 setinterval animate text and remove image on button click 开始。我想在动画停止时更改按钮的背景颜色 - 从该按钮移除焦点并将按钮设置回它们在鼠标悬停或单击并开始动画之前的状态。我试图将它包含在 stopanimation 函数中,但我没有得到我正在寻找的结果。
在我的完整代码中,我包含了一个 mouseout 函数来更改按钮的背景颜色,但我真的很想将它绑定到过渡/动画,以便在动画完成时它会发生变化,就像我可以删除文本和图像一样。
我希望有人能够帮助解决这个问题。提前致谢。
这是我的代码
<html lang="en">
<head>
<meta charset="utf-8">
<title></title>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="https://d3js.org/topojson.v0.min.js"></script>
<style>
</style>
</head>
<body>
<div id ="container">
<div id ="mapdata"></div>
<div id = "buttons"></div>
</div>
<script>
d3.queue()
.defer(d3.csv, "data/testData.csv")
.await(ready);
function ready (error, data){
var dataGroup = d3.nest()
.key(function(d) {return d.year;}).sortKeys(d3.ascending)
.key(function(d){return d.VoyageID;}).sortKeys(d3.ascending)
.entries(data);
dataGroup.forEach(function(yearObject,i) {
var buttons = d3.select("#buttons").selectAll("button")
.data(dataGroup)
.enter()
.append("button")
.attr("class", "buttons")
.attr("id", function(d){return "button_" + d.key})
.append("label")
.text(function(d){return d.key;})
var testData = d3.select("#mapdata").selectAll(".voyageData")
.data(dataGroup)
.enter()
.append("div")
.attr("class", "voyageData")
.attr("id", function(d){return "voyageText_" + d.key})
var data = testData.selectAll(".data")
.data(function(d) {return d.values;})
.enter()
.append("div")
.attr("class", "data")
.attr("id", function(d){return "data_" + d.key})
var images = testData.selectAll(".images")
.data(function(d) {return d.values;})
images.exit().remove();
images.enter()
.append("div")
.attr("class", "images")
.attr("id", function(d){return "images_" + d.key})
//buttons
buttons.on("mouseover", clickButton);
var runningAnimation = null;
function stopAnimation(animation, voyageID, voyageClass) {
clearInterval(animation);
d3.select("#data_"+ voyageID).text("");
d3.select("#images_" + voyageID).select("img").remove();
d3.select("#button_" + voyageClass).style("background-color", "red");
runningAnimation = null;
}
function clickButton(d,i) {
var voyageClass = d.key;
var voyageID = d.values[0].key;
d3.select("#button_" + voyageClass).style("background-color", "green")
if (runningAnimation) { stopAnimation(runningAnimation.animation, runningAnimation.voyageID, runningAnimation.voyageClass); }
//animate place name and dates
var j = 0;
var animation = setInterval(function(){
d3.select("#data_"+ voyageID)
.text(function(d) { return d.values[j].arrivalDateTxt +" "+d.values[j].placeName; });
j = j + 1;
if(j==d.values[0].values.length) { stopAnimation(animation, voyageID, voyageClass); }
},1000);
runningAnimation = { animation: animation, voyageID: voyageID, voyageClass: voyageClass };
//add image
d3.select("#images_" + voyageID)
.append("img")
.attr("src", function(d){return d.values[j].groupPic })
.attr("width", "40");
}
});
}
</script>
</body>
</html>
这是我的示例数据:
VoyageID,arrivalDateTxt,year,placeName,groupPic
1,14 January 1906,1906,Place 1,ANMS1113[006].jpg
1,1 May 1907,1906,Place 2,ANMS1113[006].jpg
1,26 October 1907,1906,Place 3,ANMS1113[006].jpg
1,4 November 1907,1906,Place 4,ANMS1113[006].jpg
1,26 November 1907,1906,Place 5,ANMS1113[006].jpg
1,3 December 1907,1906,Place 6,ANMS1113[006].jpg
1,10 December 1907,1906,Place 7,ANMS1113[006].jpg
1,20 December 1907,1906,Place 8,ANMS1113[006].jpg
1,26 December 1907,1906,Place 9,ANMS1113[006].jpg
3,12 March 1845,1845,Island 1,00038301_4.jpg
3,15 March 1845,1845,Island 2,00038301_4.jpg
3,22 March 1845,1845,Place in ocean 3,00038301_4.jpg
3,23 July 1845,1845,Place in ocean 4,00038301_4.jpg
3,19 December 1845,1845,Place in ocean 5,00038301_4.jpg
3,22 January 1846,1845,Place in ocean 6,00038301_4.jpg
3,30 January 1846,1845,Back home,00038301_4.jpg
解决方案
不要设置background-color
为红色
d3.select("#button_" + voyageClass).style("background-color", "red");
删除样式stopAnimation
d3.select("#button_" + voyageClass).style("background-color", null);
推荐阅读
- excel - 如何检查工作簿是否存在?
- node.js - 构建与 gmail 集成的程序的最佳方法
- python - 出于某种原因,我的 python 代码正在跳过代码的某个部分(pygame)
- templates - 表中的Docusign动态行生成
- c++ - glfw3.dll 运行代码时未发现系统错误
- javascript - 我需要一些关于在套接字 io 中实现客户端的建议
- c# - 升级到 .NET 5 时,来自 EF Core 的 NonConfiguredNavigationToSharedType 错误
- macos - MacBook Air M1的zsh终端出现pyenv相关错误
- hyperledger - 错误:调用期间背书失败。响应:状态:500 消息:“模拟错误:执行事务失败
- windows - 用cmd替换子文件夹中的多个文件