グラフの円弧は、更新後に縮小されます

Question

ドーナツの一部が突き出ているドーナツチャートがあります。ここにスクリーンショットがあります。

オレンジ、赤と青の円弧が突き出していると私は、彼らが縮小し、このような通常となって作品のいずれかにカーソルを合わせると、それらが永久しかし飛び出したいです。

我々はピースが飛び出し作るためにタイムアウト機能を使用している：ここでは

setTimeout(function() { 
    chart.internal.expandArc(['A', 'B', 'D']) 
}, 0) 

が、これはJavaScriptの問題やどのように私ができる場合、私は思っていた私のFIDDLE

ですおそらくこれを変えてアークを永久に突き出すことができます。

Answer 1

あなたはマウスアウトでそれをリセットするためにもう一度expandArc関数を呼び出すことができます。

onmouseout: function (d, i) { 
    chart.internal.expandArc(['A', 'B', 'D']); 
} 

はfiddleを更新しました。

var currentSlice; 
 

 
var chart = c3.generate({ 
 
    data: { 
 
     x: 'x', 
 
     columns: [ 
 
      ['x', '2013-01-01', '2013-01-02', '2013-01-03', '2013-01-04', '2013-01-05', '2013-01-06'], 
 
      ['A', 30, 200, 100, 400, 150, 250], 
 
      ['B', 130, 100, 140, 200, 150, 50], 
 
      ['C', 50, 100, 130, 240, 200, 150], 
 
      ['D', 130, 100, 140, 200, 150, 50], 
 
      ['E', 130, 150, 200, 300, 200, 100] 
 
     ], 
 
     type: 'donut', 
 
     onclick: function (e) { 
 
      
 
     }, 
 
     onmouseover: function (d, i) { 
 
     
 
      
 
     
 
      
 
      
 
     }, 
 
     onmouseout: function (d, i) { 
 
\t \t \t \t \t chart.internal.expandArc(['A', 'B', 'D']) 
 
     } 
 
    }, 
 
    axis: { 
 
     x: { 
 
      type: 'timeseries', 
 
      tick: { 
 
       format: '%Y-%m-%d', 
 
       centered: true, 
 
       position: 'inner-right' 
 
      } 
 
     } 
 
    }, 
 

 
    bindto: '#dash', 
 
    bar: { 
 
     width: { 
 
      ratio: 0.5 // this makes bar width 50% of length between ticks 
 
     } 
 

 
    }, 
 
    pie: { 
 
     expand: true, 
 
    }, 
 
    tooltip: { 
 
     grouped: false, 
 
     contents: function (data, defaultTitleFormat, defaultValueFormat, color) { 
 
      // console.log("Containt"); 
 
      // console.log(data, defaultTitleFormat, defaultValueFormat, color); 
 
      return "<p style='border:1px solid red;'>" + data[0].value + "</p>"; 
 

 
     } 
 
    } 
 
}); 
 

 
setTimeout(function() { 
 
    chart.internal.expandArc(['A', 'B', 'D']) 
 
}, 0)

p { 
 
    line-height: 1; 
 
    font-weight: bold; 
 
    padding: 5px 12px; 
 
    background: rgba(0, 0, 0, 0.8); 
 
    color: #fff; 
 
    border-radius: 4px; 
 
    line-height: 15px; 
 
    font-size: 12px; 
 
    min-width: 91px; 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.10/c3.js"></script> 
 
<div id="dash"></div>

Answer 2

あなたが拡大しておきたいのセクターのために何かをしないようにchart.internal.unexpandArcを上書きすることができます。

あなたsetTimeoutはなり

setTimeout(function() { 
    chart.internal.expandArc(['A', 'B', 'D']) 
    var originalUnexpandArc = chart.internal.unexpandArc; 
    chart.internal.unexpandArc = function(targetIds) { 
    if (typeof targetIds === "string") { 
     if (['A', 'B', 'D'].indexOf(targetIds) !== -1) { 
     return; 
     } 
    } 
    else { 
     targetIds = targetIds.filter(function(id) { return ['A', 'B', 'D'].indexOf(id) === -1; }); 
    } 
    return originalUnexpandArc.apply(this, [ targetIds ]); 
    } 
}, 0); 

---

更新フィドル - （あなたが円グラフの中心に置く場合）、これはStackSnippetsでは動作しませんが、それがあるように思わ興味深いことにhttps://jsfiddle.net/161jdsq9/