我怎样才能在D3中的矩形上写一段文字呢

How can I write a piece of text over my rectangles in D3?

本文关键字：文字 一段 D3      更新时间：2023-09-26

我使用以下代码创建了几个长矩形：

如何在每个矩形上方书写文本？我试着在输入选择后附加"文本"，也试着在所有代码后的"ttest"上附加"文本"，但对我来说不可行。

非常感谢任何帮助！var ttest=SVGTTest.全选（"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");

您需要分别追加两个元素（svg rect和text元素）。一种常见的处理方法是绑定一个创建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();

不能直接将文本写入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'来实现这一点。

相关文章：