Javascript 如何在d3中的气泡图中包装长标签文本？

我使用的是D3版本3，我对D3非常陌生，就像今天是我的D3第二天……我需要做这个项目，把每个类别都放入气泡中……我从课堂上得到了以下D3代码，教授说只要改变数据集使其工作……但我的数据标签太长，无法放入每个气泡中……因为我对D3一无所知，虽然我确实找到了一些关于如何包装文本的代码，但我不知道如何将其放在那里。请帮忙~~

这是教授给出的D3版本3代码：

var diameter = 800, //max size of the bubbles
   color = d3.scale.category20(); //color category

var bubble = d3.layout.pack()
.sort(null)
.size([diameter, diameter])
.padding(1.5);

var svg = d3.select("section")
.append("svg")
.attr("width", diameter)
.attr("height", diameter)
.attr("class", "bubble");

d3.csv("data.csv", function(error, data){

//convert numerical values from strings to numbers
data = data.map(function(d){ d.value = +d["Amount"]; return d; });

//bubbles needs very specific format, convert data to this.
var nodes = bubble.nodes({children:data}).filter(function(d) { return !d.children; });

//setup the chart
var bubbles = svg.append("g")
    .attr("transform", "translate(0,0)")
    .selectAll(".bubble")
    .data(nodes)
    .enter();

//create the bubbles
bubbles.append("circle")
    .attr("r", function(d){ return d.r; })
    .attr("cx", function(d){ return d.x; })
    .attr("cy", function(d){ return d.y; })
    .style("fill", function(d) { return color(d.value); });

//format the text for each bubble
bubbles.append("text")
    .attr("x", function(d){ return d.x; })
    .attr("y", function(d){ return d.y + 5; })
    .attr("text-anchor", "middle")
    .text(function(d){ return d["Item"]; })
    .style({
        "fill":"white", 
        "font-family":"Verdana, san-serif",
        "font-size": "12px"
    });
})

这是我正在使用的data.csv：

Item,Amount
Daily Phone Pick-ups on Average: 183 Counts ,182
Daily Screen Time: 401 minutes,401.4
Daily Walking & Running Distance: 0.188 miles,188.36
Daily Steps: 44 Counts,448
Daily Flights Climbed: 39 Counts,393

---

非常感谢

以下是一个稍微简化的版本：

运行代码：

var diameter=800，//气泡的最大大小
颜色=d3.scale.category20（）//颜色类别
var bubble=d3.layout.pack（）
.sort（空）
.尺寸（[直径，直径]）
.填充（1.5）；
var svg=d3.选择（“节”）
.append（“svg”）
.attr（“宽度”，直径）
.attr（“高度”，直径）
.attr（“类”、“气泡”）；
//d3.csv（“data.csv”，函数（错误，数据）{
var数据=[{“项目”：“每日平均接电话次数：183次”，“金额”：“182次”；{“项目”：“每日屏幕时间：401分钟”，“金额”：“401.4次”；{“项目”：“每日步行和跑步距离：0.188英里”，“金额”：“188.36次”；{“项目”：“每日步数：44次”，“金额”：“448次”；{“项目”：“每日航班爬升次数：39次”，“金额”：“393次”]；
//将数值从字符串转换为数字
data=data.map（函数（d）{
d、 价值=+d[“金额”]；
返回d；
});
//气泡需要非常特定的格式，将数据转换为这种格式。
var节点=bubble.nodes({
儿童：数据
}).过滤器（功能（d）{
返回！d.儿童；
});
//设置图表
var bubbles=svg.append（“g”）
.attr（“转换”、“转换（0,0）”）
.selectAll（“.bubble”）
.数据（节点）
.enter（）；
//创造泡沫
气泡。附加（“圆圈”）
.attr（“r”，函数（d）{
返回d.r；
})
.attr（“cx”，功能（d）{
返回d.x；
})
.attr（“cy”，函数（d）{
返回d.y；
})
.样式（“填充”，功能（d）{
返回颜色（d值）；
});
//设置每个气泡的文本格式
气泡。追加（“文本”）
.attr（“x”，函数（d）{
返回d.x；
})
.attr（“y”，函数（d）{
返回d.y+5；
})
.attr（“文本锚定”、“中间”）
.文本（功能（d）{
返回d[“项目”]；
})
.风格({
“填充”：“白色”，
“字体系列”：“Verdana，san serif”，
“字体大小”：“12px”
})
.每件（包装）；
//})
函数换行（d）{
变量文本=d3。选择（此），
宽度=d.r*2，
x=d.x，
y=d.y，
words=text.text（）.split（/\s+/）.reverse（），
单词
行=[]，
行号=0，
线宽=1.1，
tspan=text.text（null）.append（“tspan”）.attr（“x”，x）.attr（“y”，y）；
while（word=words.pop（））{
行。推（字）；
tspan.text（line.join（“”））；
if（tspan.node（）.getComputedTextLength（）>width）{
line.pop（）；
tspan.text（line.join（“”））；
行=[字]；
tspan=text.append（“tspan”）.attr（“x”，x）.attr（“y”，y）.attr（“dy”，++lineNumber*lineHeight+“em”）.text（word）；
}
}
}

bubbles.append("text")
    .attr("x", function(d) {
      return d.x;
    })
    .attr("y", function(d) {
      return d.y + 5;
    })
    .attr("text-anchor", "middle")
    .text(function(d) {
      return d["Item"];
    })
    .style({
      "fill": "white",
      "font-family": "Verdana, san-serif",
      "font-size": "12px"
    })
    .each(wrap);

function wrap(d) {
    var text = d3.select(this),
      width = d.r * 2,
      x = d.x,
      y = d.y,
      words = text.text().split(/\s+/).reverse(),
      word,
      line = [],
      lineNumber = 0,
      lineHeight = 1.1,
      tspan = text.text(null).append("tspan").attr("x", x).attr("y", y);
    while (word = words.pop()) {
      line.push(word);
      tspan.text(line.join(" "));
      if (tspan.node().getComputedTextLength() > width) {
        line.pop();
        tspan.text(line.join(" "));
        line = [word];
        tspan = text.append("tspan").attr("x", x).attr("y", y).attr("dy", ++lineNumber * lineHeight + "em").text(word);
      }
    }
}