Question

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

如何在每个矩形上方书写文字？我试过追加＆＃34;文字＆＃34;输入选择并尝试附加＆＃34;文本＆＃34; on＆＃34; ttest＆＃34;毕竟我的代码，但它并没有为我做好。

任何帮助都非常有用！ var ttest = SVGTTest .selectAll（＆＃34; RECT＆＃34）。数据（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元素）。处理此问题的常用方法是绑定创建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元素。我建议你创建一个组元素并在里面添加矩形和文本元素。然后你也可以直接在该组上使用鼠标事件（如果你愿意），就像你可以在这个小提琴中看到的那样：

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'来完成的。

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

2 个答案: