我正在尝试将一些文本附加到页面上已有的文本中。我第一次这样做,它的工作原理。我第二次尝试时遇到麻烦,直到找到这个: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");
答案 0 :(得分: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()
。在这种情况下,也没有必要传递一个关键功能。