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)