Javascript d3js在多行上写入标签

我正在研究图形，在图表方面遇到了一些困难。我想画一个饼图（或甜甜圈），并以两行或更多行显示标签，以便为图形获得更多的空间

这是我的密码

var-dataGroupPotential=[]；
派瓦尔集团；
var-svg；
processData（“pieGPChart”）；
函数processData（chartDivId）{
$（#piegpregend”）.text（“标题：myTitle”）；
//表数据的构造
dataGroupPotential.push({
标签：“长文本1:100000”，
价值：100000000
});
dataGroupPotential.push({
标签：“长文本2:2000000”，
价值：200000000
});
dataGroupPotential.push({
标签：“长文本3:3000000”，
价值：300000000
});
var width=$（“#”+chartDivId）.width（）；
var-dividor=2.75；
变量高度=宽度/分度；
//图中的追踪者
svg=d3。选择（“#”+chartDivId）。追加（“svg”）
.attr（“宽度”，“100%”）
.attr（“高度”，“100%”）
.attr（'viewBox'，'0'+数学最小值（宽度，高度）+''+数学最小值（宽度，高度））
.attr（'preserveAspectRatio'，'xMinYMin'）
.附加（“g”）
.attr（“变换”、“平移”（“+width/2+”，“+height/2+”））；；
append（“g”）.attr（“类”、“切片”）；
svg.append（“g”）.attr（“类”、“标签”）；
svg.append（“g”）.attr（“类”、“行”）；
$（“#”+chartDivId）.height（height）；
drawMyPie（svg、dataGroupPotential、宽度、高度）；
window.addEventListener（'resize'，函数（事件）{
//在这里做事
var chartDivId=“pieGPChart”；
var width=$（“#”+chartDivId）.width（）；
var-dividor=2.75；
变量高度=宽度/分度；
$（“#”+chartDivId）.height（height）；
drawMyPie（svg、dataGroupPotential、宽度、高度）；
});
}
函数drawMyPie（svg、数据、宽度、高度）{
变量半径=数学最小值（宽度、高度）/2；
var pie=d3.pie（）
.sort（空）
.价值（功能（d）{
返回d值；
});
var arc=d3.arc（）
.外表面（半径*0.8）
.内半径（半径*0.4）；
var outerArc=d3.arc（）
.内半径（半径*0.9）
.外层（半径*0.9）；
//attr（“transform”、“translate”（+width/2+）、“+height/2+”）；
变量键=函数（d）{
返回d.data.label；
};
var color=d3.scaleOrdinal（d3.schemeCategory 20）；
变更（数据）；
函数mergeWithFirstEqualZero（第一，第二）{
var secondSet=d3.set（）；
第二，forEach（函数（d）{
第二组。添加（d.标签）；
});
var onlyFirst=第一个
.过滤器（功能（d）{
return！secondSet.has（d.label）
})
.地图（功能（d）{
返回{
标签：d.标签，
数值：0
};
});
返回d3.merge（[第二，仅第一]）
.排序（功能（a、b）{
返回d3.升序（a.标签，b.标签）；
});
}
功能更改（数据）{
var持续时间=3000；
var data0=svg.select（“.slice”）.selectAll（“path.slice”）
.data（）.map（函数（d）{
返回数据
});
如果（data0.length==0）data0=data；
var=mergeWithFirstEqualZero（数据，data0）；
var=mergeWithFirstEqualZero（数据0，数据）；
/*----切片弧-------*/
var slice=svg.select（“.slices”）.selectAll（“path.slice”）
.数据（pie（was），键）；
slice.enter（）
.插入（“路径”）
.attr（“类”、“切片”）
.样式（“填充”，功能（d）{
返回颜色（d.数据.标签）；
})
.每个功能（d）{
这是。_电流=d；
});
slice=svg.select（“.slices”）.selectAll（“path.slice”）
.数据（饼图（is）、键）；
片
.transition（）.duration（持续时间）
.attrTween（“d”，函数（d）{
var interpolate=d3.interpolate（该电流，d）；
var_this=这个；
返回函数（t）{
_该值为._电流=插值（t）；
返回电弧（此电流）；
};
});
slice=svg.select（“.slices”）.selectAll（“path.slice”）
.数据（饼图（数据），键）；
片
.exit（）.transition（）.delay（持续时间）。持续时间（0）
.remove（）；
/*----文本标签-------*/
var text=svg。选择（“.labels”）。选择全部（“文本”）
.数据（pie（was），键）；
text.enter（）
.append（“文本”）
.attr（“dy”，“.35em”）
.style（“不透明度”，0）
.文本（功能（d）{
返回d.data.label；
})
.每个功能（d）{
这是。_电流=d；
});
//var legend=text.enter（）；
//text.append（“文本”）
//.attr（“dy”、“-10”）
//.style（“不透明度”，0）
//.文本（功能（d）{
//返回d.data.label；
//    })
//.每个功能（d）{
//这是。_电流=d；
//});
//text.append（“文本”）
//.attr（“dy”，“10”）
//.style（“不透明度”，0）
//.文本（功能（d）{
//返回d.data.label；
//    })
//.每个功能（d）{
//这是。_电流=d；
//});
函数midAngle（d）{
返回d.startAngle+（d.endAngle-d.startAngle）/2；
}
text=svg。选择（“.labels”）。选择全部（“text”）
.数据（饼图（is）、键）；
text.transition（）.duration（持续时间）
.样式（“不透明度”，函数（d）{
返回d.data.value==0？0:1；
})
.attrTween（“转换”，函数（d）{
var interpolate=d3.interpolate（该电流，d）；
var_this=这个；
返回函数（t）{
var d2=插值（t）；
_该电流=d2；
var pos=外表面质心（d2）；
位置[0]=半径*（中间角（d2）.append("tspan")
.attr("x", 0)
.attr("dy", "1.3em")
.text(function(d) {
    return d.data.label.split(":")[1];
})