dc.js - 如何在 dc.js 饼图上定位标签？

Question

我想显示小切片( chart.minAngleForLabel(0.05) )的标签，避免文本重叠。

我添加了一个将标签移向外边缘的renderlet:

  .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 之后):




但它会产生烦人的转换——标签向质心移动然后跳回。有解决方法吗？

Answer 1

我的解决方案有点过分，但我想知道现在是否可以替换转换位置，now that we have the pretransition event在 dc.js 2.0 beta 11 中。

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

我无法让您的代码正常工作，所以我只是通过将所有标签位置偏移 -25、-25 来测试这一点。不过思路是一样的，我们用原来的代码得到质心，然后修改那个位置:

// 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) + ')';
            })
        });

这里的主要思想是，如果您为元素指定新的过渡，它将替换已经处于事件状态的过渡。所以我们完全删除了原来的位置和过渡，并用我们自己的代替。没有“跳”!