这个例子中的.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