My elements are created from data in a CSV file that updates every 1 minute.
I'm trying to update these elements as follows:
- Remove those whose data is no longer in the
CSV file - Create new ones that appeared in the
CSV file - Keep without edit those that still exist in the
CSV file
The CSV file looks like this:
label,value,market,numbergame
A,www.siteA.com,www.webA.com,1
B,www.siteB.com,www.webB.com,2
C,www.siteC.com,www.webC.com,3
D,www.siteD.com,www.webD.com,4
And an example of an update from it would be this (Disappearing B and D and appearing G, Z and Y):
label,value,market,numbergame
A,www.siteA.com,www.webA.com,1
G,www.siteG.com,www.webG.com,2
C,www.siteC.com,www.webC.com,3
Z,www.siteZ.com,www.webZ.com,4
Y,www.siteY.com,www.webY.com,5
To call the function that updates every 1 minute the data I use this script:
<script id="auto-update-csv">
let interval_csv
window.addEventListener('DOMContentLoaded', () => {
interval_csv = setInterval(refresh_csv, 30000); // refresh every 60 secs
})
function refresh_csv() {
d3.csv("Lista_de_Jogos.csv", function(data){caixa_suspensa_5(data)});
}
</script>
The general script that contains the function called by autoupdate for this job (create the elements and update) is described like this:
<body style="background-color:black;">
<div style="color:white;font-weight:bold;overflow:hidden;overflow-y:scroll;" class="grid games" id="Lista-de-Jogos-Lateral">
<script id="script-da-caixa-de-selecao-suspensa-5">
var select_5 = d3.select("#Lista-de-Jogos-Lateral")
.append("div")
.attr("id","select-box-5")
.style("width","100%")
.style("max-height","574px");
function valorparaiframe(iframevalue) {
let link = iframevalue;
let newurl = link.split("OB_EV")[1];
newurl = newurl.split("/")[0];
return "https://sports.staticcache.org/scoreboards/scoreboards-football/index.html?eventId=" + newurl;
}
function caixa_suspensa_5(data) {
let update_5 = select_5.selectAll("div")
.data(data);
update_5.exit().remove();
const div = update_5.enter().append("div").attr("class","matches")
div.append("iframe").merge(update_5)
.attr("src",d => valorparaiframe(d.value))
.style("width","100%")
.style("height","282");
div.append("form").merge(update_5)
.attr("action",d => d.market)
.attr("target","_blank")
.style("width","100%")
.append("input").merge(update_5)
.attr("type","submit")
.attr("target","_blank")
.style("width","100%")
.attr("value","Jogo Betfair")
div.append("form").merge(update_5)
.append("input").merge(update_5)
.attr("type","text")
.attr("id",d => "barra-de-texto-para-grafico-" + d.numbergame)
.style("width","100%")
div.append("img").merge(update_5)
.attr("type","text")
.attr("src","https://sitedeapostas-com.imgix.net/assets/local/Company/logos/betfair_logo_transp.png?auto=compress%2Cformat&fit=clip&q=75&w=263&s=c1691b4034fd0c4526d27ffe8b1e839c")
.attr("name",d => "grafico-betfair-" + d.numbergame)
}
d3.csv("Lista_de_Jogos.csv", function(data){caixa_suspensa_5(data)});
</script>
</div>
</body>
As seen, I tried to work with this part in the idea of trying to update the elements:
let update_5 = select_5.selectAll("div")
.data(data);
update_5.exit().remove();
const div = update_5.enter().append("div").attr("class","matches")
But when the trigger is activated, it becomes a huge mess with new elements being created and the old ones not being removed properly.
Which model should I use so that it works according to my need?
I use d3.js version 4:
<script src="https://d3js.org/d3.v4.js"></script>
The page template with multiple columns that are created and updated would look like this:
from How to update elements of an HTML that the elements are created using data from a CSV file?
No comments:
Post a Comment