c3.js：ギャップ/ヌル値に基づいてシリーズ内のドットを非表示にする

Question

APIを使用して特定のサービスからチャートを複製しようとしていますが、ギャップを表示する際に問題があります。ですから、今はストリームが特定のソースに関する情報を提供していないので、columnおよびconnectNullにnull値を設定することによって処理します：false。

しかし、そこにドットが隠されているので、値がnulles

[null, 66, null] 

によって隔離されているシナリオは、だから、何もhappesませんが、私は、この値を表示したいです。 私は、特定のドットに対して強制的にopacitiy：1を使用することを考えていましたが、それらを検出する方法はありません。何かアドバイス？

self.chart = c3.generate({ 
    bindto: d3.select('#' + self.chartDivId), 
    data: { 
     x: 'x', 
     xFormat: self.options.xAxisTimeFormat, 
     columns: self.chartDataSet, 
    }, 
    line: { 
     connectNull: ??? 
    }, 
    point: { 
     show: ??? 
    }, 
    tooltip: { 
     show: true, 
     grouped: true 
    }, 
    axis: { 
     x: { 
      type: 'timeseries', 
      tick: { 
       fit: false, 
       format: self.options.xAxisTimeFormat, 
       localtime: false 
      } 
     }, 
     y: { 
      min: 0, 
      tick: { 
       fit: false, 
       format: function(d) { 
        return self.yFormatter(d); 
       }, 
      } 
     } 
    } 
}); 

Answer 1

これをチャートの宣言に追加します。すべてのc3サークルクラス（各データシリーズのポイント）を検索し、それに関連付けられたデータを独立したデータポイントに対してテストします。これらを使用して、関連する個々の円（点）に不透明度を設定します。

onrendered: function() { 
    var circles = d3.select("#chart").selectAll(".c3-circles"); 
    circles.each (function (d) { 
     var isolates = d.values.filter (function(obj, i) { 
      var precedeNull = (i === 0 || d.values[i-1].value === null); 
      var followingNull = (i === d.values.length-1 || d.values[i+1].value === null); 
      return precedeNull && followingNull; 
     }); 
     var indexSet = d3.set (isolates.map (function (iso) { return iso.index; })); 
     d3.select(this).selectAll("circle.c3-circle").style("opacity", function (d,i) { 
      return indexSet.has(i) ? 1 : 0;  
     }); 
    }) 
} 

http://jsfiddle.net/ht2nrmg7/

- フルフィドルの代わりにヌルの