0

我有一个包含 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)); 中。这里发生了什么，我该如何解决？

4

1 回答 1

1

发生的情况是您的单个文本元素首先附加，因为其他代码必须等待 AJAX 请求。因此，当您附加文本元素的其余部分时，其中一个已经存在。此现有文本元素由 选择selectAll("text")，然后与 中的数据匹配dataset。默认情况下，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);
       });

不需要进行其他更改。

于 2013-03-29T08:57:08.960 回答