在D3中如何在矩形上写一段文字？

Question

我用下面的代码创建了几个长方形：

如何在每个矩形上方写入文本？我已经尝试将"text“附加到enter选择项中，也尝试在所有代码之后添加"ttest”中的"text“，但对我来说都不起作用。

任何帮助都会得到极大的重视！var ttest = SVGTTest .selectAll("rect") .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元素)。处理这种情况的一种常见方法是绑定一个enter选择来创建svg g组元素，然后使用该选择分别附加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();

Answer 2

您不能直接将文本写入rect元素。我建议您创建一个group元素，并在其中添加矩形和一个文本元素。

http://jsfiddle.net/fbwdajwm/1/

因此，基本上您可以像这样添加goup元素：

var svgg = svg.selectAll("g.myGroup")
    .data(myData)
    .enter()
    .append("g");

然后你可以像这样再次访问你的数据：

svgg.each(function (d, i) {

    selection = d3.select(this);
    selection.append("rect")
    // ...
});

编辑：

请看这里：

http://jsfiddle.net/fbwdajwm/4/

那我做了什么？我通过一个类和选择器'g.myGroup'来做到这一点。