Javascript 向我的SVG窗口添加标题会删除一个数据点吗？（d3）

我有一个100个数字的数据集，在SVG中，我创建了一组文本对象，使用下面的代码显示这些数字：

          svg.selectAll("text")
           .data(dataset)
           .enter()
           .append("text")
           .text(function(d) {
                console.log(output_format(d));
                return output_format(d);

这很好用。但是，如果我稍后尝试使用以下代码创建标题（在d3.csv括号之外）：

        svg.append("text")
          .text("Actual Labels")
          .attr("x", w/1.92)
          .attr("y", top_gap/1.5)
          .attr("class", "title"); 

---

然后第一个数据点被擦除，甚至不显示在console.log（output_format（d））；。这里发生了什么？我该如何解决这个问题？

发生的是，您的单个文本元素首先被追加，因为其他代码必须等待AJAX请求。因此，当您附加其余的文本元素时，其中一个已经存在。此现有文本元素由

selectAll（“text”）

选择，然后与

数据集中的数据匹配。默认情况下，d3根据索引匹配数据——数组中的第一个元素与已经存在的第一个元素匹配，因此不在您操作的
.enter（）
选择中

解决此问题的最简单方法是为动态附加的文本标签指定一个不同的类，并根据该类进行选择。也就是说，用于附加动态标签的代码如下所示

svg.selectAll("text.label")
       .data(dataset)
       .enter()
       .append("text")
       .attr("class", "label")
       .text(function(d) {
            console.log(output_format(d));
            return output_format(d);
       });

不需要其他更改。
Lars，再次感谢。我也很感激你的解释。