C3 Liniendiagramm: komprimieren oder Pause Intervall zwischen entfernten Punkten

Question

Ich möchte dieses C3 Diagramm zu verbessern. Das Problem ist, dass das Intervall zwischen zwei Punkten groß ist und ich das komprimieren oder brechen möchte, während ich auch eine Linie zeige, um anzuzeigen, dass es auf der x-Achse einen Bruch gibt. Kann ich das mit C3 oder vielleicht D3 machen?

var chart = c3.generate({ 
 
    data: { 
 
    x: 'x', 
 
    columns: [ 
 
     ['x', '2010-01-01', '2010-01-02', '2013-01-03', '2013-01-04', '2013-01-05', '2013-01-06'], 
 
     ['data1', 30, 200, 100, 400, 150, 250], 
 
    ] 
 
    }, 
 
    axis: { 
 
    x: { 
 
     type: 'timeseries', 
 
     tick: { 
 
     format: '%Y-%m-%d' 
 
     } 
 
    } 
 
    } 
 
});

<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.11/c3.css'> 
 
<div id="chart"></div> 
 
<script src='https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.11/c3.js'></script> 
 
<script src='https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.js'></script>

Answer 1

Dies ist ein Abdriften in dem ‚gemeinen Hack‘ Gebiet, aber wenn Sie Ihre Achse eingestellt werden eine Zeitreihe eine Kategorie zu sein und nicht die Werte selbst gleichmäßig verteilen. Dann können Sie an den entsprechenden Punkten Dummy-Datenpunkte mit Kategorienamen wie '//' hinzufügen, die Ihren bekannten Daten entsprechen oder eine Funktion zum Analysieren und Einfügen verwenden, die Brüchen in der Achse ähneln. Verschieben Sie dann diese Werte in der onRendered-Funktion auf die Achse und legen Sie die connectNull-Einstellung fest, um die Linie kontinuierlich zu halten.

Natürlich macht dies nicht alle Arten von Sachen wie die lokalen Verteilungen von Zeitpunkten, die Sie interessiert sein könnten, und jetzt sind Ihre Punkte zwischen Ticks statt Slap Bang über einem Tick, aber es ist eine Option. ..

var chart = c3.generate({ 
 
    data: { 
 
    x: 'x', 
 
    columns: [ 
 
     ['x', '2010-01-01', '2010-01-02', '//', '2013-01-03', '2013-01-04', '2013-01-05', '2013-01-06'], 
 
     ['data1', 30, 200, null, 100, 400, 150, 250], 
 
    ] 
 
    }, 
 
    axis: { 
 
    x: { 
 
     type: 'category', 
 
     tick: { 
 
     format: '%Y-%m-%d' 
 
     } 
 
    } 
 
    }, 
 
line: { 
 
    connectNull: true, 
 
    }, 
 
onrendered: function() { 
 
    d3.selectAll("tspan") 
 
     .filter (function(d) { return d.splitted === "//"; }) 
 
     .attr ("dy", "0em") 
 
     .style ("font-size", "2.5em") 
 
    ; 
 
} 
 
});

<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.11/c3.css'> 
 
<div id="chart"></div> 
 
<script src='https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.11/c3.js'></script> 
 
<script src='https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.js'></script>