dc.js 饼图切片移动

Question

我想在选中 dc.js 个饼图切片后将其向外移动。

我想在选择饼图切片时基本上这样做：

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

我想将其作为 dc.js 中的默认行为。

知道要更改 dc.js 中的哪个函数以获得所需的效果吗？

Answer 1

由于以下几个原因，这实际上很烦人：

您必须与 dc.js 的内置转换作斗争。
None 暴露了半径或圆弧的内部计算。

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

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

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

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

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)

dc.js 饼图切片移动

dc.js pieChart slice move

javascript

dc.js