javascript - 如何在 D3 中的矩形上写入一段文本？

Question

我使用以下代码创建了一些长矩形:

如何在每个矩形上方写入文本？我尝试将“文本”附加到输入选择中，并尝试在所有代码之后在“ttest”上附加“文本”，但它对我来说不起作用。

非常感谢任何帮助! var ttest = SVGTTest .selectAll("矩形") .data(ttestArray);

ttest.exit()
    .style("opacity", TTEST_OPACITY)
    .transition()
    .duration(ANIMATION_TIME_MODIFIER*300)
    .style("opacity", 0)
    .remove();

ttest.enter()
    .append("rect");

ttest
    .attr("x", function(d, i){
        var startIndex = (ttestArray[i][0]+1)*100;
        return xScale(startIndex);
    })
    .attr("y", function(d, i){
        return yScale(ttestArray[i][3]);
    })
    .attr("width", function(d, i){
        var endIndex = (ttestArray[i][1]-ttestArray[i][0])*100;
        return xScale(endIndex);
    })
    .attr("height", 3)
    .style("opacity", 0)
    .transition().duration(ANIMATION_TIME_MODIFIER*500)
    .style("opacity", TTEST_OPACITY)
    .style("fill", "#000000");

Answer 1

您需要分别附加两个元素(svg rect 和 text 元素)。处理此问题的常见方法是绑定(bind)一个创建 svg g 组元素的 Enter 选择，然后使用该选择附加 rect 和 text单独的元素:

var rects = d3.selectAll("g.rectGroup")
    .data(data);

var rectEnter = rects.enter().append("g") 
    .attr("class", "rectGroup");

rectEnter.append("rect").attr({..});
rectEnter.append("text").attr({..});

rects.exit().remove();