附加文本不会根据 CSV 文件更改进行更新答案

【问题标题】：Appended text is not updated according to CSV file changes附加文本不会根据 CSV 文件更改进行更新
【发布时间】：2022-01-13 13:36:44
【问题描述】：

我使用D3.js 将数据从我的 CSV 文件导入项目文件夹，使用 Live Server 创建在 Visual Studio Code 中生成的 HTML 页面。

这段代码旨在定义text 的div：

                    enter.append("div")
                        .text(d => d.attackmomentum)
                        .style("color", "White");

CSV 文件 (./stackoverflow.csv) 具有以下格式：

id,attackmomentum
9832401,25

值25 正是文本值，如果它更改为90，则文本将从25 更改为90。

考虑到这一点，我在更新脚本中添加了.data(data,d=>d.attackmomentum)：

                    let update_5 = select_5.selectAll(".matches")
                        .data(data,d=>d.id)
                        .data(data,d=>d.attackmomentum);

但是当根据我创建的触发器每 5 秒更新我的 CSV 中的 attackmomentum 列值时，该值不会根据文件中的内容而改变，它会保留我创建页面时的值。

我应该改变什么来更新这个文本而不需要刷新整个页面？

这是我的完整代码（仅隐藏个人数据以便查看）。

<html>
    <head>
        <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>
        <div class="grid games" id="jogos-stackoverflow">
        </div>
            <script id="script-da-caixa-de-selecao-suspensa-5">
                var select_5 = d3.select("#jogos-stackoverflow")
                .append("div")
                .attr("id","select-box-5")
                .style("width","100%")

                function valorparaiframe(iframevalue) {
                    let link = iframevalue;
                        return "https://........../" + iframevalue + "/";
                }

                async function update() {

                    let data = await d3.csv("./stackoverflow.csv");

                    let update_5 = select_5.selectAll(".matches")
                        .data(data,d=>d.id)
                        .data(data,d=>d.attackmomentum);
                    
                    update_5.exit().remove();

                    // Enter new divs:
                    const enter = update_5.enter()
                        .append("div")
                        .attr("class","matches");

                    // Append the sum
                    enter.append("div")
                        .text(d => d.attackmomentum)
                        .style("color", "White");
                    
                    // Append the children to entered divs:
                    enter.append("iframe")
                        .attr("src",d => valorparaiframe(d.id))
                        .style("width","100%")
                        .style("height","110");
                }
                
                update();
                    setInterval(update,5000);
            </script>
        </div>
    </body>
</html>

【问题讨论】：

标签： javascript html csv d3.js

【解决方案1】：

双重.data 让我很困惑，但我会这样做。

您只更新了新元素的文本（在.enter() 之后仅选择了新元素），而不是现有元素的文本。在我看来，使用.join 而不是.enter 可以更容易地将一次性逻辑与更新逻辑分开。这给出了以下代码：

async function update() {
  let data = await d3.csv("./stackoverflow.csv");

  select_5.selectAll(".matches")
    .data(data, d => d.id)
    .join(
      enter => {
        // First append the containing div
        const divs = enter
          .append("div")
          .attr("class", "matches");
        
        // Append a div with the text and the iframe
        divs.append("div")
          .style("color", "white");
        divs.append("iframe")
          .attr("src", d => valorparaiframe(d.id))
          .style("width", "100%")
          .style("height", "110")
        
        // Return the divs matching ".matches" to be joined to the selection
        return divs;
      }
    )
    .select('div')
    .text(d => d => d.attackmomentum);
}

【讨论】：

你好@RubenHelsloot，非常感谢你的帮助，它完美地解决了我的需求，我唯一需要分析的是当有两个相同的id时，因为当我在这里进行测试时，第二个 iframe 也更新了，而不是只更新文本。如果我不能调整它，我会创建一个新问题！再次感谢您的支持！