如何更新使用CSV檔案中的資料創建元素的HTML元素？-有解無憂

我的元素是從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>

包含 autoupdate 為此作業呼叫的函式（創建元素和更新）的通用腳本描述如下：

<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,format&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")

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:
如何更新使用 CSV 檔案中的資料創建元素的 HTML 元素？

But when it updates every 1 minute, it turns this around, totally different from what I expected, the other elements disappear and keep only the <iframe>:
如何更新使用 CSV 檔案中的資料創建元素的 HTML 元素？

Here is the <style> used inside the <head> for those who want more ease to recreate the page:

<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>

uj5u.com熱心網友回復：

“它變得一團糟”。是的，它會。讓我們看一下您的部分代碼。請記住，當您使用 append 時，您將回傳附加元素的選擇：

div                  // a selection of entered div elements
   .append("form")    // append forms to the divs, return a selection of forms      
   .merge(update_5)  // merge a selection of forms with a the update selection of divs

   ...               // style the selection of divs and forms

   .append("input")  // append inputs to the selection of divs and forms
   .merge(update_5)  // merge the update selection of divs with the inputs

   ...               // style the inputs and the divs

以上顯然會導致元素被附加到你不想要的地方。

首先，我們正在合并不同型別的元素，因此，其次，我們在可能不想的時候將輸入附加到 div 和表單。本質上，我們將東西附加到各種不應該附加到它們的東西上。每次迭代保留的 div 會越來越多地受到多余元素的污染，并且您無法洗掉這些元素（您不應該洗掉這些多余的元素，您應該首先不要添加它們）。

我不會按原樣修復您的代碼，而是在評論中建議采用Altocumulus建議的方法：“與其默認按索引系結資料，不如嘗試使用鍵函式正確匹配資料記錄”：如果單個條目的資料未更改，則在附加后無需更新。相反，我們只需要洗掉已洗掉資料的 div 元素，這意味著我們只需要在輸入時附加和修改元素：

   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");

    ...

這里沒有必要合并，因為如果這些元素的資料仍然存在于資料陣列中（無論索引如何），我們不會修改現有元素。

這是一個包含除 iframe 之外的所有內容的示例（因為您沒有包含具有有效路徑的示例資料）：

顯示代碼片段

    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>

上面使用 d3.csvParse() 而不是 d3.csv() 來創建 csv 資料 - 這允許片段完全獨立，這需要使用 pre 元素來保存 csv 資料。

轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/326019.html

標籤：javascript html csv d3.js

上一篇：d3.js多折線圖上的點（符號）顏色

下一篇：一個非常簡單的d3資料連接在錯誤的地方添加了新元素