Javascript 关于d3.js的基础知识？

关于下面的d3.js代码，我有几个问题。我参考了他们的Github和一些教程，但我太笨了，无法理解他们的语言

请，如果有人了解d3js的基本知识，请对我下面的问题进行简单的阐述

请不要向我推荐链接

代码基本上创建了下表：

var dataset = [],
tmpDataset = [],
i, j;

for (i = 0; i < 5; i++) {
    for (j = 0, tmpDataset = []; j < 3; j++) {
        tmpDataset.push("Row:"+i+",Col:"+j);
    }
    dataset.push(tmpDataset);
}

d3.select("#viz")
    .append("table")
    .style("border-collapse", "collapse")
    .style("border", "2px black solid")

    .selectAll("tr")
    .data(dataset)
    .enter().append("tr")

    .selectAll("td")
    .data(function(d){return d;})
    .enter().append("td")
    .style("border", "1px black solid")
    .style("padding", "10px")
    .on("mouseover", function(){d3.select(this).style("background-color", "aliceblue")}) 
    .on("mouseout", function(){d3.select(this).style("background-color", "white")}) 
    .text(function(d){return d;})
    .style("font-size", "12px");

var数据集=[]，
tmpDataset=[]，
i、 j；
对于（i=0；i<5；i++）{
对于（j=0，tmpDataset=[]；j<3；j++）{
tmpDataset.push（“行：+i+”，列：+j）；
}
push（tmpDataset）；
}
d3.选择（“即”）
.append（“表格”）
.style（“边框塌陷”、“塌陷”）
.样式（“边框”，“2件黑色实心”）
.selectAll（“tr”）
.数据（数据集）
.enter（）.append（“tr”）
.selectAll（“td”）
.data（函数（d）{return d；}）
.enter（）.append（“td”）
.样式（“边框”，“1px黑色实心”）
.style（“填充”、“10px”）
.on（“mouseover”，function（）{d3.select（this）.style（“background color”，“aliceblue”）}）
.on（“mouseout”，function（）{d3.select（this）.style（“背景色”，“白色”）}）
.text（函数（d）{return d；}）
.style（“字体大小”、“12px”）；

问题：

当HTML中没有tr时，我们为什么要执行

selectall（“tr”）

？选择“tr”有什么意义，它甚至不存在

数据（数据集）

对tr有什么作用

td的

数据（函数（d）{return d；}）

是什么？2和3的区别是什么

---

您可以将

.selectAll（“tr”）

视为对所有现有“tr”标记的迭代。我们将新数据附加到这些

tr

标记上。因此，如果一些

tr

标记已经存在，它们的内容将被新数据生成的内容所替换。如果不存在标记，则将创建它们

现在

.data（数组）

发生了什么？这只意味着我们将迭代

数组的所有元素

，并为每个数组生成一个元素

我建议您仔细看看DOM和d3.js示例。按照moonwave99的建议，通过删除行来进行示例，肯定会帮助您更快地学习

一,。当HTML中没有tr时，我们为什么要执行

selectall（“tr”）

？选择“tr”有什么意义，它甚至不存在

selectall

在d3中是一个名称错误的函数。与其说是选择，不如说是将您放在一个与将要出现的内容相关的流程空间中。例如，如果那里有

tr

s，它将允许您与他们交谈，如果没有，它将允许您与潜在的

tr

s交谈。将两者作为一个函数是有用的，但它绝对不是一个选择

二,。在我们使用了

“tr”

之后，是否不需要结束“

”

？为什么没有附加

关闭

标记应附加在该命令中。事实上，您正在使用标签类型

tr

附加dom元素，而不是字符串

，因此它将是现成的

三,。

数据（数据集）

对tr有什么作用

数据

将数据“附加”到元素。如果查看dom，它实际上会将其添加到元素内存中表示的

\uuuu data\uuuu

属性中。这里的目的是允许您对该数据或元素进行串联操作。例如，

函数（d）{return d；}

从附加数据中获取

d

四,。td的

数据（函数（d）{return d；}）

是什么？3和4的区别是什么

d

是附加数据。如果您附加了一个对象数组，您可以执行以下操作：

.text（函数（d）{return d.name}）.attr（'height'，函数（d）{return d.value}）

五,。这个代码是做什么的
.data（[1,2,4,8,16,32]，函数（d）{返回d；}）

它将数据附加到元素上，然后通过元素循环，并使用
d
变量对该数据进行操作。
前3个问题的答案如中所示。对于问题4，我建议看一看。你的最后一个问题也在第一篇教程中得到了回答。耶，我之前看到过这件事，但请让我以更实际的方式理解事情，我通过了链接的相同示例，但我无法完全理解。如果你能用简单的语言解释我，我会很好。只是基本的机制，请不要再链接了。@jayeshjain只要调整一下代码，看看如果删除一行或更改一些参数会发生什么，你就会明白。顺便说一句，大多数语法接近于最流行的DOM库，而不是任何火箭科学。@jayeshjain：对不起，我们不是来把英语翻译成更简单的英语的。我们在这里回答编程问题。Stack Overflow是一个英文网站。如果我们能让更多的人使用不同的语言，那就太好了，但我们不是翻译服务。这是教程中的内容。我真的不能让它比那简单。有一些概念需要解释，省略它们无助于您理解。：我应该何时使用selectall和select…我如何知道？您如何知道？你可以这样问别人；）事实上，d3是辉煌的，但它的辉煌比任何组织良好的更大的一堆。据我所知，写这篇文章的人与其说是个开发者，不如说是个学者。
selectall
和
select
之间的区别类似于
queryselectorall
和
queryselector
。基本上你想选择一件事，还是所有的事。