在我的SVG窗口中添加标题会删除一个数据点? (D3)

时间:2013-03-29 08:10:41

标签: javascript d3.js

我有一个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));中。这里发生了什么,我该如何解决这个问题?

1 个答案:

答案 0 :(得分: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);
       });

不需要进行任何其他更改。