Javascript 向矩形中的圆添加文本

我试着在一个长方形的div中画圆圈。我遵循了问题的建议（我使用的答案也可以在这里找到，这非常有效）

然而，作为d3的新手，我不知道如何标记这些圆圈。我基本上想要重现的是类似于图中的可视化

我对小提琴做了以下修改：

var-bubbles=bubbleGroup.selectAll（“圆圈”）
.数据（数据）

.输入（）
.附加（“圆圈”）
.append（“text”）.attr（“dy”，“.3em”）
.style（“文本锚定”、“中间”）.text（“测试”）；

但这打破了想象

以下问题我也尝试过类似的方法：

var-bubbles=bubbleGroup.selectAll（“圆圈”）
.数据（数据）

.输入（）
.附加（“圆圈”）；
bubbleGroup.append（“文本”）
.attr（“dx”，函数（d）{return-20}）
.text（函数（d）{return“test”}）

但是文本不显示。我正在想象代码应该是这些的一些变体，但我无法理解它

---

谢谢！

将

圆圈

和

文本

放在

g

内，并调整

g

css变换，即可修复此问题

（函数（）{
//D3程序适合不同尺寸的圆
//在固定纵横比的矩形中
//尽可能的紧密和合理。
//
//Amelia Bellamy Royds为回应
//http://stackoverflow.com/questions/13339615/packing-different-sized-circles-into-rectangle-d3-js
//基于迈克·博斯托克的
//"http://bl.ocks.org/mbostock/7882658“例如：
//http://bl.ocks.org/mbostock/7882658
//参数//
var N=25；//节点数
var sortOrder=-1；
//>0表示升序，
var bubbles = bubbleGroup.selectAll("g")
    .data(data)          
    .enter().append("g").attr("class","gBubble");

bubbles.append("circle")
    .on("mouseover",function(){ 
        $(this).attr("cursor","pointer")
    })
    .on("click",function(){alert("clicked")});

bubbles.append("text").text(function(d){return d.name;}).style("opacity","1");