【发布时间】：2021-11-20 23:40:58
【问题描述】：
我的元素是根据CSV file 中的数据创建的，每 1 分钟更新一次。
我正在尝试按如下方式更新这些元素：
- 删除那些数据不再在
CSV file - 创建出现在
CSV file中的新的 - 保留
CSV file中仍存在的内容而不进行编辑
CSV 文件如下所示：
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
它的更新示例如下（消失的 B 和 D 并出现 G、Z 和 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
要调用每 1 分钟更新一次数据的函数，我使用此脚本：
<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>
包含此作业的自动更新调用的函数（创建元素并更新）的通用脚本描述如下：
<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>
正如所见，我尝试使用这部分来尝试更新元素：
let update_5 = select_5.selectAll("div")
.data(data);
update_5.exit().remove();
const div = update_5.enter().append("div").attr("class","matches")
但是当触发器被激活时，它会变得一团糟，新元素被创建而旧元素没有被正确删除。
我应该使用哪种模型才能根据我的需要工作？
我用d3.jsversion 4：
<script src="https://d3js.org/d3.v4.js"></script>
但是当它每 1 分钟更新一次时，它会扭转这种局面，与我的预期完全不同，其他元素消失并只保留 <iframe>:
这是<head> 中使用的<style>，供那些希望更轻松地重新创建页面的人使用：
<style>
{
box-sizing: border-box;
}
.matches {
text-align:center;
float: left;
width: 355px;
border: 1px solid white;
border-collapse: collapse;
}
.column {
text-align:center;
float: left;
width: 355px;
border: 1px solid white;
border-collapse: collapse;
}
.grid {
float: left;
width: 1431px;
}
.row:after {
content: "";
display: table;
clear: both;
}
.button {
background-color: #33ccff;
color: black;
font-weight: bold;
}
input[type=submit] {
background-color: #33ccff;
color: black;
font-weight: bold;
}
html {
overflow: scroll;
overflow-x: hidden;
}
::-webkit-scrollbar {
width: 0px; /* remove scrollbar space /
background: transparent; / optional: just make scrollbar invisible /
}
/ optional: show position indicator in red */
::-webkit-scrollbar-thumb {
background: #FF0000;
}
</style>
【问题讨论】：
-
不要按索引绑定数据，这是默认的，尝试使用键函数正确匹配数据记录：
.data(data, d => d.label);。有关详细信息，请参阅selection.data([data[, key]])上的 docs。 -
从版本 5 开始，可以等到加载 CSV 文件。示例：
d3.text(window.location.protocol + '//' + window.location.host + '/car_data.csv').then( (data) => { var parsedCSV = d3.csvParseRows(data); <...> });
标签： javascript html csv d3.js