Javascript 饼图中的D3标签被切断

我对D3饼图有一个问题，当标签出现时，标签会被切断。这是一张照片：

我是D3新手，不确定修复应该在哪里。制作饼图的逻辑是400行，因此我制作了一个pastebin：

也许问题出在这个功能上

function showDetails(layer, data) {
    active.inner = !active.inner
    active.outer = false
    let lines = guideContainer.selectAll('polyline.guide-line-inner')
        .data(pie(data.inner))
    let text = guideContainer.selectAll('.inner-text')
        .data(pie(data.inner))

    if (active.inner) {
        // LINES
        lines.enter()
            .append('polyline')
            .attr('points', calcPoints)
            .attr('class', 'guide-line-inner')
            .style('opacity', 0)
            .transition().duration(300)
            .style('opacity', d => { return d.data.value <= 0 ? 0 : 1 })

        lines.attr('points', calcPoints).attr('class', 'guide-line-inner')

        // TEXT
        text.enter()
            .append('text')
            .html(labelText)
            .attr('class', 'inner-text label label-circle')
            .attr('transform', labelTransform)
            .attr('dy', '1.1em')
            .attr('x', d => { return (midAngle(d) < Math.PI ? 15 : -15) })
            .style('text-anchor', d => { return (midAngle(d)) < Math.PI ? 'start' : 'end' })
            .style('opacity', 0)
            .call(wrap, 300)
            .on('click', d => { vm.$emit('details', d) })
            .transition().duration(300)
            .style('opacity', d => { return d.data.value <= 0 ? 0 : 1 })
    } else {
        lines.transition().duration(300)
            .style('opacity', 0)
            .remove()
        text.transition().duration(300)
            .style('opacity', 0)
            .remove()
    }
    guideContainer.selectAll('polyline.guide-line-outer').transition().duration(300)
        .style('opacity', 0)
        .remove()
    guideContainer.selectAll('.outer-text').transition().duration(300)
        .style('opacity', 0)
        .remove()
}

函数显示详细信息（图层、数据）{
active.inner=！active.inner
active.outer=false
让直线=导向容器。选择全部（'polyline.guide line-inner'）
.数据（饼图（数据内部））
让text=guideContainer.selectAll（“.inner text”）
.数据（饼图（数据内部））
如果（活动的内部）{
//线条
行。输入（）
.append（'多段线'）
.attr（'points'，calcPoints）
.attr（'class'，'guide line inner'）
.style（'opacity'，0）
.transition（）.持续时间（300）
.style（'opacity'，d=>{return d.data.value{return（midAngle（d）{return（midAngle（d））{vm.$emit（'details'，d）}）
.transition（）.持续时间（300）
.style（'opacity'，d=>{return d.data.value看起来您的标签正在经过SVG边界的边缘进行转换

我将尝试在此函数中将标签元素进一步向左平移：

function labelTransform (d) {
  var pos = guideArc.centroid(d)

  pos[0] = (radius + 100) * (midAngle(d) < Math.PI ? 1 : -1)
  return 'translate(' + pos + ')'
}

函数标签转换（d）{
var pos=导向弧形心（d）
位置[0]=（半径+100）*（中间角（d）

您必须追踪标签线的生成位置，并将其缩短

您还可以尝试在此函数中将标签文本分为多行：

  function labelText (d) {
    if ((radius + 100) * (midAngle(d) < Math.PI ? 1 : 0)) {
      return '<tspan>' + d.data.display_name + ' </tspan><tspan x="15">' + d3.format('($,.0f')(d.data.value) + '</tspan>'
    } else {
      return '<tspan>' + d.data.display_name + ' </tspan><tspan x="-15" text-anchor="end">' + d3.format('($,.0f')(d.data.value) + '</tspan>'
    }
  }

函数标签文本（d）{
如果（（半径+100）*（中间角（d）
节省空间的一种方法是使用d3工具提示，而不是像这样使用固定位置标签（由另一个JSFIDLE用户创建，我刚刚添加了
边距
）

Javascript:

//Width/height
var w = 300;
var h = 300;

var dataset = [5, 10, 20, 45, 6, 25];

var outerRadius = w / 2;
var innerRadius = w / 3;
var arc = d3.svg.arc()
  .innerRadius(innerRadius)
  .outerRadius(outerRadius);

var pie = d3.layout.pie();

var color = d3.scale.category10();

//Create SVG element
var svg = d3.select("#vis")
  .append("svg")
  .attr("width", w)
  .attr("height", h);

//Set up groups
var arcs = svg.selectAll("g.arc")
  .data(pie(dataset))
  .enter()
  .append("g")
  .attr("class", "arc")
  .attr("transform", "translate(" + outerRadius + "," + outerRadius + ")");

//Draw arc paths
arcs.append("path")
  .attr("fill", function(d, i) {
    return color(i);
  })
  .attr("d", arc);

//Labels
arcs.append("text")
  .attr("transform", function(d) {
    return "translate(" + arc.centroid(d) + ")";
  })
  .attr("text-anchor", "middle")
  .text(function(d) {
    return d.value;
  });

//
var tip = d3.tip()
  .attr("class", "d3-tip")
  .html(function(d, i) {
    return d.value
  })

svg.call(tip)

arcs
  .on("mouseover", tip.show)
  .on("mouseout", tip.hide)

这使用了Justin Palmer的一个脚本，可以在Github上找到

也可以考虑使圆变小？
希望这有帮助