如何在dc.js饼图上放置标签？ [英] How to position labels on dc.js pie chart?

问题描述

我想显示小片的标签（ chart.minAngleForLabel（0.05）），以避免文本重叠。

I'd like to show labels for tiny slices (chart.minAngleForLabel(0.05)) avoiding text overlap.

我添加了一个使标签向外边缘移动的renderlet：

I added a renderlet that shifts labels toward outer edge:

  .on('renderlet', function(chart) {
      chart.selectAll('text').attr('transform', function(d, i) {
          var old = this.getAttribute('transform');
          if (d.endAngle-d.startAngle > 0.3) { return old; }
          var xy = old.slice(10,-1).split(',');
          var m = 1.25 + (i%3) * 0.25;
          return 'translate(' + (+xy[0]*m) + ',' + (+xy[1]*m) + ')';
      })
     })

我对此很满意（第二个图像位于renderlet之后） ：

and i'm rather happy with it (the second image is after renderlet):

但这会带来烦人的过渡-标签向质心移动然后跳回去。

but it makes annoying transitions -- labels move toward centroid and then jump back. Is there a workaround for this?

推荐答案

我的解决方案有点过多，但是我想知道现在是否可以替换转换位置，现在我们在dc.js 2.0中有了预转换事件 beta 11。

My solution is a bit excessive, but I wanted to know if it's now possible to replaced transitioned positions, now that we have the pretransition event in dc.js 2.0 beta 11.

实际上是。不切实际的部分是您的代码依赖于已经具有最终位置，如果我们替换过渡，我们将不再需要这些位置。相反，我们必须从头开始计算位置，这意味着要从饼图中复制一堆代码。

In fact, it is. The impractical part is that your code relies on already having the final positions, which we're not going to have if we replace the transitions. Instead, we have to calculate the positions from scratch, which means copying a bunch of code out of the pie chart.

我无法使您的代码正常工作，因此我只是通过将所有标签位置偏移-25，-25进行测试。但这是相同的想法，我们使用原始代码获取质心，然后修改该位置：

I wasn't able to get your code to work, so I'm just testing this by offsetting all label positions by -25, -25. But it's the same idea, we use the original code to get the centroid, and then modify that position:

// copied from pieChart
function buildArcs(chart) {
    return d3.svg.arc().outerRadius(chart.radius()).innerRadius(chart.innerRadius());
}

function labelPosition(d, arc) {
    var centroid = arc.centroid(d);
    if (isNaN(centroid[0]) || isNaN(centroid[1])) {
        return [0,0];
    } else {
        return centroid;
    }
}
//
        .on('pretransition', function(chart) {
            chart.selectAll('text.pie-slice').transition().duration(chart.transitionDuration())
                .attr('transform', function(d, i) {
                    var arc = buildArcs(chart);
                    var xy = labelPosition(d, arc);
                    return 'translate(' + (+xy[0] - 25) + ',' + (+xy[1] - 25) + ')';
            })
        });

这里的主要思想是，如果为元素指定新的过渡，它将替换过渡那已经很活跃了。因此，我们将完全删除原始位置和转换，并用我们自己的替换。没有跳！

The big idea here is that if you specify a new transition for an element, it will replace the transition that was already active. So we are completely removing the original position and transition, and replacing it with our own. No "jump"!

这篇关于如何在dc.js饼图上放置标签？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！