0

我正在尝试将一些文本附加到页面上已经存在的文本中。我第一次这样做，它的工作原理。我第二次尝试它时遇到了麻烦，直到我发现这个： http: //knowledgestockpile.blogspot.com/2012/01/understanding-selectall-data-enter.html

一旦我添加了一个关键功能，它就适用于除第一个之外的所有条目。如何让第一个出现？

var dataset=[{"x":0, "y":2},{"x":1, "y":2},{"x":2, "y":2},{"x":3, "y":2}];
  vis.selectAll("text")
     .data(dataset)
     .enter()
     .append("text")
     .text(function(d,i) {return d.x;})
     .attr("text-anchor", "middle")
     .attr("x", function(d, i) {return scaleX(d.x);})
     .attr("y", function(d) {return scaleY(-5) ;})
     .attr("font-family", "sans-serif")
     .attr("font-size", "11px")
     .attr("fill", "black");

  vis.selectAll("text")
     .data(dataset,function(d){return d;})
     .enter()
     .append("text")
     .text(function(d,i) {return d.x;})
     .attr("text-anchor", "middle")
     .attr("x", function(d, i) {return scaleX(d.x);})
     .attr("y", function(d) {return scaleY(20) ;})
     .attr("font-family", "sans-serif")
     .attr("font-size", "11px")
     .attr("fill", "black");

这是小提琴：http: //jsfiddle.net/tvinci/hbASc/2/

4

1 回答 1

0

通过选择文本然后调用data()，您是在告诉 d3 将新元素与现有元素进行匹配。当您这样做时，其目的通常是更新现有元素，而不是简单地将它们全部添加为新元素。

如果您想要添加两次文本，您可以为两个选择中的文本分配不同的类，这样.enter()选择将包含两种情况下的所有元素。代码将类似于

vis.selectAll("text.one")
   .data(dataset)
   .enter()
   .append("text")
   .attr("class", "one")
   ...

vis.selectAll("text.two")
   .data(dataset)
   .enter()
   .append("text")
   .attr("class", "two")
   ...

如果要更新现有文本，请删除.enter()第二个调用链中的 。在这种情况下，也不需要传入一个键函数。

于 2013-04-18T11:32:44.013 回答