d3 setinterval设置动画文本并在单击按钮时删除图像 [英] d3 setinterval animate text and remove image on button click
问题描述
我有一个单击按钮事件，用于启动一些文本的setinterval/clear interval动画，并在单击按钮时添加图像.我想在单击新按钮时如何更好地停止和删除动画文本以及删除图像方面提供帮助.此刻，当数组结束时，文本将替换为空字符串.每次单击按钮时，图像都会重复.
Hi I have a click button event to start a setinterval / clear interval animation of some text and to also add an image on a button click. I would like help in how to better stop and remove the animating text and remove the image when a new button is clicked. At the moment the text is replaced by an empty string when the array ends. the image just duplicates each time I click the button.
我看过使用exit().remove()或merge的示例，但是我不知道如何在我的情况下应用它.我的代码使用D3嵌套，并且是使用svg和d3.line以及其他过渡元素元素的更大的地图项目的一部分.
I have looked at examples that use exit().remove() or merge but I can't work out how to apply it in my case. My code uses D3 nest and is part of a much larger map project using svg and d3.line and other transitioning elements elements.
这是我的D3代码的简化示例:
This is a simplified sample of my D3 code:
<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("data-group", function(d){return d.key})
.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("data-group", function(d){return d.key})
.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
d3.select("#button_1906").on("click", function(d){
clickButton(d,i);
});
d3.select("#button_1845").on("click", function(d){
clickButton(d,i);
});
function clickButton(d,i) {
var voyageClass = d.key;
var voyageID = d.values[0].key;
//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)
clearInterval(animation)
if(j==d.values[0].values.length)
d3.select("#data_"+ voyageID)
.text("") // is there a better way to stop or remove text on completion of animation? I am just replacing it with an empty string.
},1000);
//add image
d3.select("#images_" + voyageID)
.append("img")
.attr("src", function(d){return d.values[j].groupPic })
.attr("width", "40")
//how do I remove image on completion of animation or click of new button?
}
});
}
</script>
</body>
</html>
这是我的示例csv:
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
我非常希望有人能够帮助我，并帮助我以更D3的方式改进代码.
I am very much hoping someone can help me and help me to improve my code in a more D3 way.
先谢谢萨莉
推荐答案
要在完成后删除图像，您可以使用:
to remove the image on completion you can use:
//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) {
clearInterval(animation);
d3.select("#data_"+ voyageID).text("");
d3.select("#images_" + voyageID).select("img").remove();
}
},1000);
设置.text("")可以像动画之前那样恢复状态/DOM，所以我认为没有问题.
Setting the .text("") restores the state/DOM as before the animation, so I see no problems with that.
要停止播放动画，您必须跟踪上一个动画
To stop the animation you have to keep track of the previous animation
var runningAnimation = null;
function stopAnimation(animation, voyageID) {
clearInterval(animation);
d3.select("#data_"+ voyageID).text(""); // is there a better way to stop or remove text on completion of animation? I am just replacing it with an empty string.
d3.select("#images_" + voyageID).select("img").remove();
runningAnimation = null;
}
function clickButton(d,i) {
if (runningAnimation) { stopAnimation(runningAnimation.animation, runningAnimation.voyageID); }
var voyageClass = d.key;
var voyageID = d.values[0].key;
//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); }
},1000);
runningAnimation = { animation: animation, voyageID: voyageID };
//add image
d3.select("#images_" + voyageID)
.append("img")
.attr("src", function(d){return d.values[j].groupPic })
.attr("width", "40");
}
可以简化按钮单击处理程序的设置
Setting the button click handler can be simplified
buttons.on("click", clickButton);
//buttons
// d3.select("#button_1906").on("click", function(d){
// clickButton(d,i);
// });
// d3.select("#button_1845").on("click", function(d){
// clickButton(d,i);
// });
这篇关于d3 setinterval设置动画文本并在单击按钮时删除图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
