d3.jsを使用してc3.jsチャートを変更する

Question

私はC3.jsを使用してチャートを作成しています。私は簡単なドーナッツチャートを作成しました。ここにスクリーンショットがあります：

私は別のドーナツスライス/ピースの上にマウスを置くと、それらが広がります。特定のドーナツ片は、それらの上にマウスを移動せずに、デフォルトではそのように拡大させることが可能であれば私は思っていた

：ここではその出来事のスクリーンショットです。私もドーナツ片を作るために次のコードを追加することが示唆されたFIDDLE

が飛び出し、私の

はここにある：

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

は、しかし、これはチャートが乱雑になり、円はもはや維持されていません。ここではスクリーンショットです：

Answer 1

次

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

Source

注使用します。理想的なソリューションはmouseoverコールバックをつかむと、あなたのデータではなく、あなたならば、それを呼び出すことであろうがアークを広げたいだけで上記のメソッドを呼び出すだけです

var currentSlice; 
 

 
var chart = c3.generate({ 
 
    bindto: '#dash', 
 
    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' 
 
    }, 
 
    axis: { 
 
    x: { 
 
     type: 'timeseries', 
 
     tick: { 
 
     format: '%Y-%m-%d', 
 
     centered: true, 
 
     position: 'inner-right' 
 
     } 
 
    } 
 
    }, 
 
    bar: { 
 
    width: { 
 
     ratio: 0.5 // this makes bar width 50% of length between ticks 
 
    } 
 
    }, 
 
    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']) 
 
}, 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.11/c3.min.js"></script> 
 
<link href="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.11/c3.min.css" /> 
 
<div id="dash"></div>