Question

此问题的触发器是d3.js的作者（context）的以下代码段：

      // Select the svg element, if it exists.
      var svg = d3.select(this).selectAll("svg").data([data]);

      // Otherwise, create the skeletal chart.
      var gEnter = svg.enter().append("svg").append("g");
      gEnter.append("path").attr("class", "area");
      gEnter.append("path").attr("class", "line");
      gEnter.append("g").attr("class", "x axis");

让我失望的是评论，尤其是第二篇评论中的“其他”。

更具体地说，这些评论的措辞告诉我，上面的代码段等同于以下内容：

    var svg = d3.select(this).selectAll("svg").data([data]);

    if (svg.length == 0 || svg[0] === undefined) {
        // svg element does not yet exist
        var gEnter = svg.enter().append("svg").append("g");
        gEnter.append("path").attr("class", "area");
        gEnter.append("path").attr("class", "line");
        gEnter.append("g").attr("class", "x axis");
    }

......或者甚至可能是以下内容：

    var svg = d3.select(this).selectAll("svg");

    if (svg.length == 0 || svg[0] === undefined) {
        // svg element does not yet exist
        var gEnter = svg.enter().append("svg").append("g");
        gEnter.append("path").attr("class", "area");
        gEnter.append("path").attr("class", "line");
        gEnter.append("g").attr("class", "x axis");
    }
    else {
        // svg element already exists
        svg.data([data]);
    }

这两个明显等价中的任何一个或其他实际上是否正确？

如果没有，当// Otherwise...元素已经存在时，第二个评论（svg）之后的四行代码会怎么做？

Answer 1

这些评论本身就具有误导性，你必须在他们的背景下考虑它们。具体来说，.data()传递单元素数组，即只匹配单个元素。整个构造只是执行注释中提到的内容的快捷方式 - 检查元素是否存在，如果不存在，则创建它。

以下是发生的事情。代码选择所有SVG并将单个数据与它们匹配（data）。因此，如果已经存在SVG，则它将处于更新选择中，并且输入选择将为空。如果不是，则输入选择将具有单个元素。这就是“否则”所指的 - “其他”是隐含的，因为只处理了输入选择。

在此特定上下文中，代码等同于您发布的两个代码段。它只是更短。

仍然被d3的输入方法搞糊涂了

1 个答案: