在 Snippet 之后，有我在 Visual Studio Code 中嘗試的完整代碼。
我將在下面留下的這個模型使用兩個<pre>帶有資料的元素，以便頁面每 2 秒重繪 一次頁面資料，但我希望這樣而不是使用帶有值的元素，我希望每 2 秒使用現有資料重繪 頁面一個名為的檔案中的資料List_of_Games.csv
此檔案中的資料每 1 分鐘更新一次，它們label,value,market,numbergame與<pre>元素具有相同的模型。
我怎么能這樣做？我無法為此繪制模型。
let csv1 = d3.csvParse(d3.select("#csv1").remove().text());
let csv2 = d3.csvParse(d3.select("#csv2").remove().text());
let csv = [csv1, csv2];
let i = 0;
var select_5 = d3.select("#Lista-de-Jogos-Lateral")
.append("div")
.attr("id","select-box-5")
.style("width","100%")
.style("max-height","574px");
function update() {
let data = csv[i %2];
let update_5 = select_5.selectAll(".matches")
.data(data,d=>d.label);
update_5.exit().remove();
// Enter new divs:
const enter = update_5.enter()
.append("div")
.attr("class","matches")
// Append the children to entered divs:
enter.append("form")
.attr("action",d => d.market)
.attr("target","_blank")
.style("width","100%")
.append("input")
.attr("type","submit")
.attr("target","_blank")
.style("width","100%")
.attr("value","Jogo Betfair");
enter.append("form")
.append("input")
.attr("type","text")
.attr("id",d => "barra-de-texto-para-grafico-" d.numbergame)
.style("width","100%")
.attr("value", d=>d.label);
enter.append("img")
.attr("type","text")
.attr("src","https://sitedeapostas-com.imgix.net/assets/local/Company/logos/betfair_logo_transp.png?auto=compress,format&fit=clip&q=75&w=263&s=c1691b4034fd0c4526d27ffe8b1e839c")
.attr("name",d => "grafico-betfair-" d.numbergame);
}
update();
setInterval(update,2000);{
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;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/7.1.1/d3.min.js"></script>
<div style="color:white;font-weight:bold;overflow:hidden;overflow-y:scroll;" class="grid games" id="Lista-de-Jogos-Lateral">
<pre id="csv1">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</pre>
<pre id="csv2">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</pre>
</div>我嘗試在 Visual Studio Code 中以這種方式使用它，但沒有得到積極的反饋：
<html>
<head>
<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>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/7.1.1/d3.min.js"></script>
<script src="https://d3js.org/d3.v4.js"></script>
<script id="auto-update-images">
let interval_images
window.addEventListener('DOMContentLoaded', () => {
interval_images = setInterval(refresh_images, 1000); // refresh every 1 sec
})
function refresh_images() {
if (!document.images) return;
const totalimages = document.querySelectorAll("img").length - 1;
const lastimages = parseInt(document.getElementsByTagName('img')[totalimages].getAttribute('name').replace("grafico-betfair-", "")) 1;
for (let i = 1; i < lastimages; i ) {
try {
document.images['grafico-betfair-' i].src = document.getElementById('barra-de-texto-para-grafico-' i).value;
} catch (e) {
}
}
}
</script>
<script id="random-number">
function generateRandomIntegerInRange(min, max) {
return Math.floor(Math.random() * (max - min 1)) min;
}
</script>
</head>
<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 update() {
let data = d3.csv("Lista_de_Jogos.csv");
let update_5 = select_5.selectAll(".matches")
.data(data,d=>d.label);
update_5.exit().remove();
// Enter new divs:
const enter = update_5.enter()
.append("div")
.attr("class","matches")
// Append the children to entered divs:
enter.append("form")
.attr("action",d => d.market)
.attr("target","_blank")
.style("width","100%")
.append("input")
.attr("type","submit")
.attr("target","_blank")
.style("width","100%")
.attr("value","Jogo Betfair");
enter.append("form")
.append("input")
.attr("type","text")
.attr("id",d => "barra-de-texto-para-grafico-" d.numbergame)
.style("width","100%")
.attr("value", d=>d.label);
enter.append("img")
.attr("type","text")
.attr("src","https://sitedeapostas-com.imgix.net/assets/local/Company/logos/betfair_logo_transp.png?auto=compress,format&fit=clip&q=75&w=263&s=c1691b4034fd0c4526d27ffe8b1e839c")
.attr("name",d => "grafico-betfair-" d.numbergame);
}
update();
setInterval(update,2000);
</script>
</div>
</body>
</html>
uj5u.com熱心網友回復：
我對您的代碼進行了一些調整以使其正常作業。
- 首先，我將所有腳本標簽移動到標簽的末尾
<body>并按順序放置它們。 - 其次，我添加
d3-fetch.js了一個依賴項并洗掉了重復的依賴項d3.js。 - 第三，我禁用了所有自動更新代碼，以測驗代碼并避免變得瘋狂。
當我在不使用 Web 服務器的情況下使用瀏覽器打開 HTML 檔案時，對檔案的請求失敗，因此代碼不起作用。我安裝Live Server在 VSCode 中，它立即開始作業，能夠讀取檔案并將元素附加到正文中。
我遇到的另一個錯誤是Uncaught TypeError: document.getElementsByTagName(...)[totalimages] is undefined因為它可以讀取資料。一旦我可以打開檔案，該錯誤就消失了。
<html>
<head>
<style>
body {
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>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/7.1.1/d3.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/d3-fetch@3"></script>
</head>
<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">
</div>
<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");
async function update() {
let data = await d3.csv("./Lista_de_Jogos.csv");
console.log("Data from CSV file: ", {data})
let update_5 = select_5.selectAll(".matches")
.data(data,d=>d.label);
update_5.exit().remove();
// Enter new divs:
const enter = update_5.enter()
.append("div")
.attr("class","matches")
// Append the children to entered divs:
enter.append("form")
.attr("action",d => d.market)
.attr("target","_blank")
.style("width","100%")
.append("input")
.attr("type","submit")
.attr("target","_blank")
.style("width","100%")
.attr("value","Jogo Betfair");
enter.append("form")
.append("input")
.attr("type","text")
.attr("id",d => "barra-de-texto-para-grafico-" d.numbergame)
.style("width","100%")
.attr("value", d=>d.label);
enter.append("img")
.attr("type","text")
.attr("src","https://sitedeapostas-com.imgix.net/assets/local/Company/logos/betfair_logo_transp.png?auto=compress,format&fit=clip&q=75&w=263&s=c1691b4034fd0c4526d27ffe8b1e839c")
.attr("name",d => "grafico-betfair-" d.numbergame);
}
update();
console.log("Auto CSV update is disabled!")
//setInterval(update,2000);
</script>
<script id="auto-update-images">
let interval_images
window.addEventListener('DOMContentLoaded', () => {
console.log("Auto update images is disabled!")
interval_images = refresh_images(); //setInterval(refresh_images, 5000); // refresh every 5 sec
})
function refresh_images() {
if (!document.images) return;
const totalimages = document.querySelectorAll("img").length - 1;
const lastimages = parseInt(document.getElementsByTagName('img')[totalimages].getAttribute('name').replace("grafico-betfair-", "")) 1;
for (let i = 1; i < lastimages; i ) {
try {
document.images['grafico-betfair-' i].src = document.getElementById('barra-de-texto-para-grafico-' i).value;
} catch (e) {
}
}
}
</script>
<script id="random-number">
function generateRandomIntegerInRange(min, max) {
return Math.floor(Math.random() * (max - min 1)) min;
}
</script>
</body>
</html>如果您嘗試使用“運行代碼片段”按鈕運行此代碼，它將失敗，因為它無權訪問 csv 檔案。不過，它應該適用于有效資料。您的代碼希望通過使用 csv 檔案中可用的欄位來替換影像 URL，因此請確保您的資料具有這些欄位。
轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/325999.html
標籤：javascript html 文件 d3.js
上一篇：在Javascript/HTML中的CSV檔案中的最后一個逗號之后獲取值
下一篇：在圖例刻度中顯示正確域值的問題