Donut-Diagramm-Schnitte in C3/D3 ändern

Question

Ich habe ein einfaches Donut-Diagramm mit c3.js erstellt. Hier ist die FIDDLE.

Wenn Sie über eine Scheibe des Donuts schweben, wird es sich herausheben. Ich habe mich gefragt, ob es möglich ist, dass die Scheibe standardmäßig herausragt, ohne darüber zu schweben.

Zum Beispiel möchte ich Slice A, Slice B und C als Standard-Stickout. Wie kann ich das tun?

Hier ist mein Code

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

Sie können setTimeout() verwenden bestimmte Scheiben zu skalieren, sobald die Grafik gerendert wird. Hier ist eine Möglichkeit:

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

Dieser Anruf nach dem c3.generate() Anruf.

Answer 2

c3js hat zwei Optionen, aber beide erfordern einen leichten Hack mit 'setTimeout', um unsere Standardskalierung zu erzwingen nach Rendering und Animation auftreten.

1. onrendered Die Funktion ist im c3config Objekt einzustellen, dass man das Diagramm mit initialisiert. Diese Funktion wird ausgelöst, nachdem ein Neuzeichnen ausgelöst wurde, aber vor visuelles Rendering im DOM passiert. Allerdings gibt es einen Hack zu verwenden setTimeout, da es einen separaten Callstack erstellen wird, die nach der aktuelle Callstack, der in c3 passiert, neu zeichnen das Diagramm ausführen. (explanation of setTimeout to force logic to run after current callstack executes)

2. load Die Funktion stellt einen done Rückruf, der ausgelöst wird, nachdem die Elemente auf das DOM aber vor die Animations Oberflächen gerendert werden. Wenn also die anfängliche Maßstabsumwandlung abgeschlossen ist, wenn die von load ausgelösten Animationen die Maßstabsumwandlung verwenden (was das Laden eines Kreisdiagramms zu tun scheint), überschreibt der letzte Keyframe der Animation die geänderte Skala wieder auf scale(1). Wir können jedoch auch setTimeout verwenden, um unseren Code after den aktuellen Callstack (der Animation enthält) auszuführen.

dies Bei der Erforschung, habe ich eine generalisierte Form der Antwort des rby, und ich biete zwei alternative Wege Standardskalen durch die onrendered und done Funktionen ausgesetzt in c3 zu setzen. (Fiddle):

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)); 
} 

Innerhalb c3config Objekt und onrendered durch Initialisierung:

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 
    } 
}); 

auch möglich load mit done nach der Initialisierung zu verwenden:

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 
    } 
});