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. 没有暴露半径或弧的内部计算。

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

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

相反，这只是在所有转换后应用更改。所以它来回跳了一下。

我们需要从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)