dc.js pieChart切片移动

Question

当dc.js pieChart切片被选中时，我想将它们向外移动。

在选择饼片时，我想基本上做到这一点：

var arcOver = d3.svg.arc()
    .outerRadius(outerRadius + 10)
    .innerRadius(innerRadius + 10);

我希望在dc.js中将其作为默认行为。

知道在dc.js中哪个功能要改变才能达到预期的效果吗？

Answer 1

这实际上是相当烦人的，因为有几个原因：

1. 您必须与dc.js的内置过渡做斗争。
2. 半径或弧的内部计算都没有暴露出来。

这是可以在外部更改行为的地方之一，但实际上只更改库就更简单了。

我将分享一个部分解决方案，但这有点尴尬，因为它只解决了第二个问题。在某个地方，我确实找到了一种方法来覆盖饼形图转换的开始和结束状态，只是为了证明我可以做到。

相反，这只适用于所有转换后的更改。所以它来回跳了一下。

我们需要从dc的pieChart中复制一些弧生成代码

function arcGen(chart, offset) {
    var maxRadius =  d3.min([chart.width(), chart.height()]) / 2;
    var givenRadius = chart.radius();
    var radius = givenRadius && givenRadius < maxRadius ? givenRadius : maxRadius;
    return d3.svg.arc()
        .outerRadius(radius - chart.externalRadiusPadding() + offset)
        .innerRadius(chart.innerRadius() + offset);
}

前几行是对饼图如何确定半径的解释。然后，我们构建弧形发生器，并可选择地将其与饼图自然使用的内容相抵消。

现在，我们可以应用"renderlet“(所有转换完成后事件的事件处理程序)将所有选定的弧更改为较大的半径。我们还需要将任何未选定的弧恢复到较小的半径：

chart.on('renderlet', function(chart) {
    var regArc = arcGen(chart, 0), bigArc = arcGen(chart, 40);
    chart.selectAll('g.pie-slice path')
        .attr('d', function(d, i) {
            return d3.select(this.parentNode).classed('selected') ? bigArc(d, i) : regArc(d, i);
        });
});

下面是一个演示：https://jsfiddle.net/1z2ckx87/6/

GIF显示了紧张的行为：

​

如果您致力于这种方法，并且不关心过渡，您可以关闭它们以摆脱这种跳跃：

chart
  .transitionDuration(0)