我有一个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));中。这里发生了什么,我该如何解决这个问题?
答案 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);
});
不需要进行任何其他更改。