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. 半径または円弧の内部計算は公開されていません。

これは、動作を外部から変更することができる場所の1つですが、実際にはライブラリを変更する方が簡単かもしれません。

私は部分的な解決策を共有しますが、それは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); 
} 

最初の数行は、円グラフは、半径を決定する方法の言い換えです。次に、アークジェネレータを構築し、必要に応じて円グラフが自然に使用するものからオフセットします。

ここでは、すべてのトランジションが完了した後にイベントのイベントハンドラである「レンダレット」を適用して、選択したすべてのアークをより大きな半径に変更できます。我々はまた、より小さな半径に未選択の円弧を復元する必要があります。

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)