-1

我对以下 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. selectall("tr")当我们的 HTML 中没有 tr 时，我们为什么要这样做？选择甚至不存在的“tr”有什么意义。

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

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

4

2 回答 2

0

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

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

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

于 2013-06-19T16:55:11.557 回答
0

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

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

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

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

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

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

4. data(function(d){return d;})td 有什么用？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变量对该数据进行操作。

于 2013-06-19T17:05:42.477 回答