d3.js - 如何在不同的轴上写两个不同的文本？

Question

我必须在两个不同的轴上写文本/标签。这是我的数据大小，我想根据数组在两个轴上打印 hello 和 name。但现在只有一个轴在打印。请帮帮我：

enter code here

<script>
  var dat =[1,2,3];
  var canvas = d3.select("body").append("svg")
    .attr("height",500)
    .attr("width",1000)
  var x=10 ; var y=30; var space =50;
  var x1=0 ; var y1=30;
  var gene =canvas.selectAll("text")
    .data(dat)
    .enter()
    .append("text")
    .attr("x",function(d){x=x+space; return x; })
    .attr("y",30)
    .text("hello")
  var gene2 =canvas.selectAll("text")
    .data(dat)
    .enter()
    .append("g")
    .attr("x",function(d){return x1; })
    .attr("y",function(d) {y1=y1+space; return y1; })
    .text("name")
</script>

Answer 1

您没有区分两组<text>元素。代码使用第一个数据绑定创建节点，然后选择这些相同的节点并再次绑定相同的数据（使用相同的默认绑定键），这将简单地更新现有节点上的数据（即，enter()选择将为空）。

这是与此类似的问题。有几个选项可以解决那里描述的问题。