关于d3.js的基础知识？

Question

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

问题：

1. 为什么我们的HTML中没有tr时我们会selectall("tr")？选择'tr'有什么意义呢？

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

3. td的data(function(d){return d;})是多少？ 2和3有什么区别？

Answer 1

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

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

我建议你仔细看看DOM和d3.js的例子。通过删除moonwave99建议的线条来实现示例，肯定会帮助您更快地学习。

Answer 2

  

1。当我们的HTML中没有tr时，为什么我们会selectall("tr")？选择'tr'的意义何在，甚至不存在。

selectall在d3中是用词不当，这是一个非常缺乏命名的函数。它没有那么多选择，因为你把你放在与那里相关的过程空间中。例如，如果有tr，那么它将允许您与他们交谈，如果不是，它将允许您与潜在的tr进行对话。将两者作为一个函数有用，但它绝对不是一个选择。

  

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变量对该数据进行操作。