C3/D3のドーナツチャートスライスを修正

Question

c3.jsを使用して簡単なドーナツチャートを作成しました。ここにはFIDDLEがあります。

ドーナツのスライスの上にマウスを置くと突き出てしまいます。私はスライスがホバーオーバーすることなくデフォルトで張り出すことが可能かどうか疑問に思っていました。

たとえば、スライスA、スライスB、およびCをデフォルトで固定したいのですがどうすればいいですか？

は、ここに私のコード

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) { 
      if(currentSlice !== void 0) { 
       'currentSlice'.attr("transform","scale(1)") 
      } 

      currentSlice = d3.select(i).attr("transform", "scale(1.1)"); 


     }, 
     onmouseout: function (d, i) { 

     } 
    }, 
    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>"; 

     } 
    } 
}); 

Answer 1

であるあなたは、チャートが描画されると（）、特定のスライスを拡張するのsetTimeoutを使用することができます。ここには1つの方法があります：

setTimeout(function() { 
    d3.selectAll('.c3-arc-A, .c3-arc-B, .c3-arc-C').attr("transform", "scale(1.2)");  
}, 5); 

c3.generate()コールの後にこの電話をかけてください。

Answer 2

c3js 2つのオプションがありますが、両方はレンダリングとアニメーションが発生した後が起こるために私たちのデフォルトのスケーリングを強制的に「のsetTimeout」でわずかなハックが必要です。

1. onrendered機能は、1つのチャートとを初期化c3configオブジェクト内に設定するために利用可能です。この関数は、再描画がトリガーされた後に起動されますが、DOM内でビジュアルレンダリングが行われる前にがトリガされます。しかしsetTimeoutを使用するためのハックがあります。これは、の後にを実行する別の呼び出しスタックを作成するため、c3でグラフを再描画することを含む現在の呼び出しスタックです。 （explanation of setTimeout to force logic to run after current callstack executes）

2. load機能は、後の要素はDOMにレンダリングされたトリガが、前にアニメーションが終了さdoneコールバックを露出させます。したがって、最初のスケール変換を設定した場合、負荷によってトリガーされたアニメーションがスケール変換を使用している場合、アニメーションの最後のキーフレームはscale(1)に上書きされます。ただし、同様にsetTimeoutを使用してコードafterを実行すると、現在の呼び出しスタック（アニメーションを含む）が実行されます。これを模索して

、私はRBYの答えの一般的なフォームを作成し、そして私は、C3にさらさonrenderedとdone機能を通じて、デフォルトのスケールを設定するには二つの代替パスを提供します。また

var chart = c3.generate({ 
    bindto: '#chart', 
    data: { ... }, 
    onrendered: function() { 
     setTimeout(function() { 
      if (selected.length > 0) { 
      getCurrentlySelected().attr('transform', 'scale(' + _SCALING + ')'); 
      } 
     }); // Notice we don't need a delay, just taking advantage to force our logic to happen after current callstack is executed 
    } 
}); 

可能初期化後doneとloadを使用する：

chart.load({ 
    columns: [ 
    ['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] 
    ], 
    done: function() { 
    setTimeout(function() { 
     if (selected.length > 0) { 
     getCurrentlySelected().attr('transform', 'scale(' + _SCALING + ')'); 
     } 
    }) // Notice we don't need a delay, just taking advantage to force our logic to happen after current callstack is executed 
    } 
}); 

初期スルーc3configオブジェクト内

var selected = ['A', 'B', 'C']; 
var _ARC = '.c3-arc'; 
var _SCALING = '1.1'; 

function getCurrentlySelected() { 
    var _PREFIX = _ARC + '-'; 
    return d3.selectAll(_PREFIX + selected.join(', ' + _PREFIX)); 
} 

とonrendered：（Fiddle）