关于 d3.js 的基础知识？答案

【问题标题】：Basics about d3.js?关于 d3.js 的基础知识？
【发布时间】：2013-06-19 14:13:45
【问题描述】：

我对以下 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");

问题：

当我们的 HTML 中没有 tr 时，为什么我们要使用 selectall("tr")？选择甚至不存在的“tr”有什么意义。
data(dataset) 为 tr 做什么？
什么是 td 的 data(function(d){return d;})？ 2和3有什么区别？

【问题讨论】：

前 3 个问题的答案例如在 this tutorial 中。对于问题 4，我建议查看 this tutorial。第一个教程也回答了您的最后一个问题。
yaa，我之前看到了那个东西，但是请我以更实际的方式理解事物，我经历了与链接相同的例子，但我无法完全理解它。我会很棒如果你能用简单的语言解释一下。只是基本机制，请不要再链接了。
@jayeshjain 只需调整代码，看看如果你删除一行或更改一些参数会发生什么，你就会明白。顺便说一句，大部分语法都接近于最流行的 DOM 库，而不是任何火箭科学。
@jayeshjain：抱歉，我们不是来将英语翻译成更简单的英语。我们在这里回答编程问题。 Stack Overflow 是一个英文网站。如果我们也能获得更多不同语言的使用者，那就太好了，但我们不是翻译服务。
这就是教程中的内容。我真的不能让它比这更简单。有些概念需要解释，省略它们不会帮助您理解。

标签： javascript jquery multidimensional-array d3.js

【解决方案1】：

1 .当我们的 HTML 中没有 tr 时，我们为什么要做selectall("tr")？选择甚至不存在的“tr”有什么意义。

selectall 在 d3 中用词不当，这是一个名称非常糟糕的函数。它并没有选择太多，而是将您置于与将要存在的内容相关的进程空间中。例如，如果那里有trs，它将允许您与他们交谈，如果没有，它将允许您与将在那里的潜在trs 交谈。将两者作为一个功能很有用，但绝对不是选择。

2 。在我们附加了"tr" 之后，是否不需要关闭'</tr>'？为什么没有附加</tr>？

结束 </tr> 标记应附加在该命令中。实际情况是，您正在附加一个标签类型为 tr 的 dom 元素，而不是字符串 <tr>，因此它是完整的开箱即用。

3 . data(dataset) 为 tr 做什么？

data“附加”数据到元素。如果您查看 dom，它实际上会将其添加到元素在内存中表示的 __data__ 属性中。此处的目的是允许您串联操作该数据或元素。例如function(d){ return d;} 正在从附加数据中获取d。

4 。 td 的data(function(d){return d;}) 是什么？ 3和4有什么区别？

d 是附加数据。如果你附加了一组对象，你可能会做.text(function(d){ return d.name }).attr('height', function(d){ return d.value });

之类的事情

5 .这段代码有什么作用？ .data([1, 2, 4, 8, 16, 32], function(d) { return d; });

它将数据附加到元素上，然后循环遍历它们并使用 d 变量对该数据进行操作。

【讨论】：

：我什么时候应该使用 selectall 和 select...我怎么知道？？
你怎么知道的？好吧，您可以在 SO 上问人们；）事实是 d3 非常出色，但它比任何组织良好的东西都更加出色。据我所知，编写它的人更像是一名学者，而不是一名开发人员。
selectall和select的区别类似于queryselectorall和queryselector。基本上你是想选择一件事，还是所有的事情。

【解决方案2】：

您可以将.selectAll("tr") 视为所有现有“tr”标签的迭代。正在发生的事情是我们将新数据附加到这些tr 标签。因此，如果某些tr 标签已经存在，它们的内容将被新数据生成的内容替换。如果不存在标签，则将创建它们。

现在.data(array) 发生了什么？这只是意味着我们将迭代array 的所有元素并为每个数组生成一个元素。

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

【讨论】：