附加文本未根据 CSV 文件更改进行更新

Question

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

这段代码旨在定义一个div的text:

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

CSV 文件 (./Whosebug.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-Whosebug">
        </div>
            <script id="script-da-caixa-de-selecao-suspensa-5">
                var select_5 = d3.select("#jogos-Whosebug")
                .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("./Whosebug.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>

Answer 1

双重 .data 让我感到困惑，但这就是我的做法。

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

async function update() {
  let data = await d3.csv("./Whosebug.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);
}

附加文本未根据 CSV 文件更改进行更新

Appended text is not updated according to CSV file changes

html

javascript

csv

d3.js