這個例子中的.html() d3.js 方法 function 是怎么做的？

Question

使用完整代碼編輯的帖子：

這是我的第一篇文章，所以如果我有任何錯誤，請告訴我。

我是一名大學生（交流），我正在嘗試做一個小項目以通過考試。

我的目標是為帶有 javascript 和 D3 的廣播節目制作時間表。 我知道有最好的方法......但這些是課程的主題，所以我必須使用它們。

我的一個朋友給了我很大的幫助，他給了我這個建議，在表格的每個<td>中放置一個鏈接：

這是完整的 HTML 代碼：

<!DOCTYPE html>
<html lang = "it">
    <head>
        <title>Palinsesto</title>
        <meta charset="utf-8">
        <link rel="icon" href="CoronaVirus.png" sizes= "130x130">
        <link rel="stylesheet" href="stilePalinsesto.css" media="all">
        <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/6.7.0/d3.min.js"></script>
        <script src="TabellaPalinsesto.js" defer></script>
    </head>
    <body><!-- il body è costruito in javascript --> </body>
</html>

這是 TabellaPalinsesto.js

 /* inserimento titolo h2 e paragrafo */
d3.select("body")
    .append("h2")
    .text("Palinsesto programmi 2021")
d3.select("body")
    .append("p")
    .text("Qui trovate la nostra programmazione settimanale: cliccate sul nome del proogramma per aprire la pagina relativa")

/* inserimento dell'intestazion della tabella con le relative etichette */
d3.select("body")
    .append("table")
    .append("thead")
    .append("tr")
    .selectAll("th")
    .data(["dalle", "alle", "LUNEDI", "MARTEDI", "MERCOLEDI", "GIOVEDI",
        "VENERDI", "SABATO", "DOMENICA"
    ])
    .enter()
    .append("th")
    .text(function (d) { return d });

d3.select("table")
    .append("tbody")
    .enter();

/*divisione di ogni dato array in 3 parti ProgrammaNome, ProgrammaUrl e datoClasse */
d3.csv("Palinsesto.csv", function (datiCaricati) {
    console.log(datiCaricati);
    var d = datiCaricati;
    d3.select("tbody")
        .append("tr")
        .selectAll("td")
        .data([d.dalle, d.alle, d.LUNEDI, d.MARTEDI, d.MERCOLEDI, d.GIOVEDI, d.VENERDI, d.SABATO, d.DOMENICA])
        .enter()
        .append("td")
        .html(function (cella) {
                const [ProgrammaNome, ProgrammaUrl, classeCella] = cella.split("|");
                /* se la cella ha il valore dell'url, inserisco un link */
                if (ProgrammaUrl) {
                   return "<a href='" + ProgrammaUrl + "' target='blank' \">" + ProgrammaNome + "</a>"
                }
                /* altrimenti mostro un testo normale */
                /*Se non ci fosse le colonne "dalle" e "alle" non verrebbero visualizzate */
                else {
                    return ProgrammaNome
                }
              }
             )
    
});

我不是很明白：

.html(function (cella)

html 方法如何在 javascript 中工作？ 我在哪里可以找到任何文檔？

Answer 1

該問題與 d3.js 的使用有關，它確實具有 @AndrewReid 正確說明的 a.html() 方法（並鏈接到文檔）。 它類似於 .text() 方法，它設置元素的 .innerText 屬性，但它設置當前選擇中元素的 .innerHTML 屬性。

.html() 方法的作用如下：

如果它被傳遞了一個值，它只是將元素的 innerHTML 設置為該值
如果傳遞了 function （如您的示例中所示），它將評估 function 並將元素的 innerHTML 設置為 ZC1C425268E68385D1AB5074C17A94F14 返回值。
- function 被饋送到 arguments：(d, i, nodes)，其中 d 是當前基准，i 是當前索引，nodes 是當前選擇。

讓我們從一個簡單的例子開始（見下面的代碼片段）：

我定義了一些示例數據（ myData ），我認為這些數據可能與您基於代碼的外觀非常相似。
忽略 "thead" "tr" 和 "th" 創建，現在， // create the table header:
專注於 "tbody" "tr" 和 "td" 創建，現在， // create the table body:
（“外循環”）我們 select 都是“tr”（並且不存在），所以選擇是空的，但是我們將myData綁定到這個選擇，然后.enter()這個選擇。 這實質上意味着，我們輸入一個等於我們數據長度的選擇，並且在我們數據中的每個項目上，我們可以做一些事情 - 即我們可以.append("tr") 。 這意味着我們將創建 N 個新的“tr”元素，其中 N 等於myData.length 。
（“內循環”）然后我們重復這個過程，但更深一層，將空的“td”選擇綁定到一個新的數據數組，等於外循環迭代的當前值。 我們在這里手動編寫，但我們可以編寫.data(d => Object.values(d)) 。
然后我們.enter()這個內部循環的迭代，我們創建 M 個新的“td”元素，其中 M 等於Object.values(myData[i]) ，其中i是外部循環的當前索引。
因此，我們可以總結為，我們迭代數據的行並創建相應的“tr”元素，然后在每一行中，我們迭代數據的列並創建相應的“td”元素。 但是，此時這些“td”元素是空的，這就是 .html() 的用武之地：
如前所述，我們可以將 function 傳遞給 .html() ，傳入的d參數等於迭代的當前數據項，它與.data(...)綁定。 所以在我們的例子中，這意味着首先是'mon1|www.mon1.com|some-class' ，然后'tue1|www.tue1.com|some-class' ，然后'wed1|www.wed1.com|some-class'然后我們完成了我們的第一個內部循環，我們繼續進行外部循環（及其內部循環）的下一次迭代。
我們傳入 .html() 的 function 然后簡單地拆分"|"上的字符串字符並繼續使用相應的 class、href 和 innerText 構造一個錨標記“a”。

 const myData = [ {mon: 'mon1|www.mon1.com|some-class', tue: 'tue1|www.tue1.com|some-class', wed: 'wed1|www.wed1.com|some-class'}, {mon: 'mon2|www.mon2.com|some-class', tue: 'tue2|www.tue2.com|some-class', wed: 'wed2|www.wed2.com|some-class'} ] // create the table header: d3.select("table").append("thead").append("tr").selectAll("th").data(Object.keys(myData[0])).enter().append("th").text(d => d); // create the table body: d3.select("table").append("tbody").selectAll("tr").data(myData).enter().append("tr").selectAll("td").data(d => [d.mon, d.tue, d.wed]) // Object.values(d).enter().append("td").html(function(d) { const [ProgrammaNome, ProgrammaUrl, classeCella] = d.split("|"); return `<a class="${classeCella}" href="${ProgrammaUrl}" target="blank">${ProgrammaNome}</a>`; } )

 table, table td, table th { border: solid 1px black; border-collapse: collapse; } table td, table th { padding: 5px; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script> <table></table>

請注意，從技術上講，此示例不需要 use.html()，您可以這樣做：

 const myData = [ {mon: 'mon1|www.mon1.com|some-class', tue: 'tue1|www.tue1.com|some-class', wed: 'wed1|www.wed1.com|some-class'}, {mon: 'mon2|www.mon2.com|some-class', tue: 'tue2|www.tue2.com|some-class', wed: 'wed2|www.wed2.com|some-class'} ] // create the table header: d3.select("table").append("thead").append("tr").selectAll("th").data(Object.keys(myData[0])).enter().append("th").text(d => d); // create the table body: d3.select("table").append("tbody").selectAll("tr").data(myData).enter().append("tr").selectAll("td").data(d => [d.mon, d.tue, d.wed]).enter().append("td").append("a").attr("class", d => d.split("|")[2]).attr("href", d => d.split("|")[1]).text(d => d.split("|")[0]);

 table, table td, table th { border: solid 1px black; border-collapse: collapse; } table td, table th { padding: 5px; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script> <table></table>

如果您想可視化內部和外部循環，也許這個例子會有所幫助。 (i, j) = (行, 列):

 const myData = [ {mon: 'mon1|www.mon1.com|some-class', tue: 'tue1|www.tue1.com|some-class', wed: 'wed1|www.wed1.com|some-class'}, {mon: 'mon2|www.mon2.com|some-class', tue: 'tue2|www.tue2.com|some-class', wed: 'wed2|www.wed2.com|some-class'} ] // create the table header: d3.select("table").append("thead").append("tr").selectAll("th").data(Object.keys(myData[0])).enter().append("th").text(d => d); // create the table body: d3.select("table").append("tbody").selectAll("tr").data(myData).enter().append("tr").selectAll("td").data((d,i) => [i, i, i]).enter().append("td").text((i,j) => `${i},${j}`);

 table, table td, table th { border: solid 1px black; border-collapse: collapse; } table td, table th { padding: 5px; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script> <table></table>

這個例子中的.html() d3.js 方法 function 是怎么做的？

問題描述

1 個解決方案

解決方案1
2 已采納 2021-05-01 22:22:34

這個例子中的.html() d3.js 方法 function 是怎么做的？

問題描述

1 個解決方案

解決方案1 2 已采納 2021-05-01 22:22:34

解決方案1
2 已采納 2021-05-01 22:22:34