Warning: file_get_contents(/data/phpspider/zhask/data//catemap/7/jsf/5.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
d3.js在页面上已有文本时追加文本_D3.js - Fatal编程技术网

d3.js在页面上已有文本时追加文本

d3.js在页面上已有文本时追加文本,d3.js,D3.js,我正在尝试将一些文本附加到已经在页面上的文本中。我第一次这么做的时候,它就起作用了。第二次尝试时,我遇到了麻烦,直到我发现: 一旦我添加了一个键函数,除了第一个,它对所有条目都有效。我怎样才能第一个出现 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("t

我正在尝试将一些文本附加到已经在页面上的文本中。我第一次这么做的时候,它就起作用了。第二次尝试时,我遇到了麻烦,直到我发现:

一旦我添加了一个键函数,除了第一个,它对所有条目都有效。我怎样才能第一个出现

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");

这里是小提琴:

通过选择文本,然后调用
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()
。在这种情况下,也不需要传入键函数