使用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>