D3饼图中的标签被截断

Question

我在使用D3饼图时遇到了一个问题，标签出现时被截断。以下是图片：
因为我刚开始使用D3，所以不确定应该在哪里进行修复。制作饼图的逻辑有400行，所以我将其上传到了pastebin：https://pastebin.com/32CxpeDM 也许问题出在这个函数里？

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()
}

就像我说的一样，我不了解D3，所以我不确定修复这个问题的选项。可以将图表缩小，修复其div容器的某些问题，将其发送到前面，或编辑上面的代码。理想情况下，这应该是一个干净的修复而不是一个hack，这正是我一直在尝试的。

什么是最简单和最清洁的解决方案呢？ 谢谢！

- no_parachute44

Answer 1

看起来您的标签超出了SVG边界而被转换。

我建议在此函数中将标签元素向左移动。

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

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

你需要找到生成标签行的位置并将其缩短。

在这个函数中，你也可以尝试将标签文本分成更多行：

  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>'
    }
  }

- nbwoodward

Answer 2

一个节省空间的方法是使用d3工具提示而不是固定位置的标签，就像这个fiddle（由另一个jsfiddle用户创建，我只添加了margin）。

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 的 d3 tip library，可以在 Github 上找到。

另外，你可以考虑将圆圈变小一些。

希望这对你有所帮助。

- Rachel Gallen