D3.js 向创建的D3js形状添加文本（矩形和三角形符号）

我不确定为什么不能同时使用这两种代码将文本添加到三角形和矩形中

如果两者都使用，则只显示三角形的文本。矩形的文本应显示为黄色

若我删除了向三角形添加文本的代码，那个么只会显示矩形的文本

下面是我创建形状和添加文本的代码。

    let axes_width2: any = 900;
    let axes_height2: number = 150;
    let axes_svg2: any = d3select
            .selectAll('tr')
            .append("svg")
            .attr("width", axes_width2)
            .attr("height", axes_height2);        
    // Create scale
    let scale: any = d3select.scaleTime()
            //.domain([d3select.min(data), d3select.max(data)])
            .domain([new Date(2020, 0, 1), new Date(2021, 0, 1)])
            .range([40, axes_width - 30]); 
//golive date
    var myData = [new Date(2020, 3, 1), new Date(2020, 6, 1)];      
          var testdata = [{ start: new Date(2020, 2, 0), close: new Date(2020, 9, 0) }];       
//draw rect2
        axes_svg2
            .selectAll('rect')
            .data(testdata)
            .enter()
            .append("rect")
            .style("fill", "#00a19c")
            .attr("x", function (d) {
                return scale(d.start);
            })
            .attr("y", 80) //distance from axis
            .attr("width", function (d) {
                return (scale(d.close) - scale(d.start));
            })
            .attr("height", 20); //height

    //create symbol
        var symbol = d3select.symbol().size(150).type(d3select.symbolTriangle);


        //create triangle
        axes_svg2
            .selectAll('path')
            .data(myData)
            .enter()
            .append('path')
            .attr('width', 50)
            .attr('height', 50)
            .style("fill", "#232496")

            //.attr('transform', 'translate(50, 50)')
            .attr('d', function () { return symbol(); })
            .attr('transform', function (d, i) { return "translate(" + (scale(d)) + "," + (60) + ")"; });

        //add text to triangle
        axes_svg2
            .selectAll('text')
            .data(myData)
            .enter()
            .append("text")
            .attr("x", function (d) {
                return scale(d) + 10;
            })
            .attr("y", 60)
            .attr("stroke", "black")
            .attr("font-size", "12px")
            //.attr("font-family","Museo Sans 300")
            .text("Go-Live");

        //add text to rectangle
        axes_svg2
            .selectAll('text')
            .data(testdata)
            .enter()
            .append("text")
            .attr("x", function (d) {
                return scale(d.start);
            })
            .attr("y", 120)
            .attr("stroke", "black")
            .attr("font-size", "12px")
            //.attr("font-family","Museo Sans 300")
            .text("Start Date");   

---

我作出如下更改：

//add text to rectangle
        axes_svg2
            .selectAll('null')
            .data(testdata)
            .enter()
            .append("text")
            .attr("x", function (d) {
                return scale(d.start);
            })
            .attr("y", 120)
            .attr("stroke", "black")
            .attr("font-size", "12px")
            //.attr("font-family","Museo Sans 300")
            .text("Start Date");   

---

您正在重新选择以前的文本并将另一个数据集绑定到它们。不会附加任何内容。请尝试

selectAll（null）

，正如我在这里描述的：@GerardoFurtado感谢您的回复。是的，这有帮助。谢谢