Verwenden von d3.js zum Ändern von c3.js-Diagramm

Question

Ich verwende C3.js zum Erstellen von Diagrammen. Ich habe ein einfaches Donut-Diagramm erstellt. Hier ist der Screenshot:

Wenn ich schwebe über die verschiedenen Donut Scheiben/Stücke sie erweitern. Hier ist ein Screenshot, dass das passiert:

Ich frage mich, ob es möglich ist, bestimmte Donut Stücke wie, die standardmäßig zu erweitern zu haben, ohne über sie zu schweben.

Hier ist meine FIDDLE

ich auch durchhalten, die Donut-Stücke vorgeschlagen wurde den folgenden Code hinzufügen zu machen:

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

aber das macht das Diagramm chaotisch und der Kreis wird nicht länger gepflegt. Hier ist der Screenshot:

Answer 1

Verwenden Sie den folgenden

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

Source

Hinweis: Die ideale Lösung wäre, die mouseover Rückruf greifen und es mit Ihren Daten nennen, aber wenn Sie nur die Bögen erweitern möchten, rufen Sie einfach die oben genannte Methode

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>