1

我在 D3 中学习表，我的问题是何时使用“.select()”：

例如，在建立圆圈时：

var circles = svg.selectAll("circle")
    .data(dataSet)
    .enter()
    .append("circle")
    .attr("r", 2.5)
    .attr("cx", function(d){ return d.x})
    .attr("cy", function(d){ return d.y});

选择圆圈（空）-> 附加圆圈

但是当我在建一张桌子时，

下面的代码直接追加表格，没有先select("table")。与“tr”相同。

function tabulate(data, columns) {
    var table = d3.select("#container").append("table"),
        thead = table.append("thead"),
        tbody = table.append("tbody");

    // append the header row
    thead.append("tr")
        .selectAll("th")
        .data(columns)
        .enter()
        .append("th")
            .text(function(column) { return column; });

（来自“从 csv 创建表”的代码）

为什么以下代码不起作用？

function tabulate(data, columns) {
    var table = d3.select("#container")
        .select("table")
        .append("table"),
        thead = table.append("thead"),
        tbody = table.append("tbody");

提前致谢，

4

1 回答 1

0

当您已经知道存在特定元素并且想要获取对它的引用并对它进行更改（或附加子元素）时，通常使用 Select。由于您知道 div 中没有 table 标签，因此选择它没有意义。

如果您不确定table 标签是否存在并且您想根据其他一些数据创建它，您可以修改您的代码看起来像这样：

var table = d3.select("#container")
    .select("table")
    .data(['hi'])
    .enter()
    .append("table"),
    thead = table.append("thead"),
    tbody = table.append("tbody");

但是，正如作者在此答案中所解释的那样， select 和 selectAll 的工作方式存在细微差别。我的示例代码直接在正文内而不是在 div 内创建表标记。因此，除非您确实将元素绑定到数据，否则最好直接附加。

于 2013-01-29T14:36:01.073 回答