Data binding 使用d3自动将两个数据变量中的文本放入svg

我正在学习D3，我想学习如何按照公式将文本添加到svg的不同位置，而不是手动将每个文本元素添加到某个位置。在下面添加字母A、B、C是可行的，但是前三个数字会被隐藏，因为前三个文本元素已经被A、B、C占据

我可以改变什么来分别放置我的字母和数字？谢谢你的建议

        var w = 600;
        var h = 500;

        var letters = ["A","B","C"];
        var numbers = ["1","2","3","4","5"];

        var svg = d3.select("body")
            .append("svg")
            .attr("width", w)
            .attr("height",h);

        svg.selectAll("text")
                .data(letters)
                .enter()
            .append("text")
            .attr("x", function(d, i) {return (i+1)*100})
            .attr("y", function(d, i) {return (i+1)*100}) 
            .style("text.anchor", "left")
            .style("font-size", "40px")
            .style("fill", "gray")
            .attr("font-family","monospace")
            .text(function(d){return d});

        svg.selectAll("text")
                .data(numbers)
                .enter()
            .append("text")
            .attr("x", function(d, i) {return (i+1)*100})
            .attr("y", 40) 
            .style("text.anchor", "left")
            .style("font-size", "40px")
            .style("fill", "gray")
            .attr("font-family","monospace")
            .text(function(d){return d});

---

您只需使

数字

和

字母

的

文本

元素不同即可。一种简单的方法是使用类

svg.selectAll（'text.letter'）
.日期（信件）
.输入（）
.append（'文本'）
.classed（'字母'，真）
// ...
svg.selectAll（'text.number'）
.日期（数字）
.输入（）
.append（'文本'）
.classed（'number'，true）
// ...

---

谢谢，谢谢，谢谢！简单地更改文本元素就解决了我的问题。我将尝试使用.classed。。。如果我遇到更多的问题也一样。