c3.js - xgrid行のツールチップ

Question

c3.jsを使用しているときにxgrid行にカーソルを置くとツールチップが表示される可能性がありますか？

var chart1 = c3.generate({ 
    bindto: '#chart1', 
    padding: { 
     right:30 
    }, 
    data: { 
      x: 'x', 
      xFormat: '%Y-%m-%d %H:%M', 
      columns: 
      [ 
       ['x', '2013-01-01 00:00', '2013-01-01 01:00','2013-01-01 03:00','2013-01-01 04:00', '2013-01-01 05:00', '2013-01-01 06:00', '2013-01-01 07:00', '2013-01-01 08:00', '2013-01-01 09:00', '2013-01-01 10:00', '2013-01-01 11:00','2013-01-01 12:00','2013-01-01 13:00', '2013-01-01 14:00', '2013-01-01 15:00', '2013-01-01 16:00', '2013-01-01 17:00', '2013-01-01 18:00', '2013-01-01 19:00', '2013-01-01 20:00', '2013-01-01 21:00', '2013-01-01 22:00', '2013-01-01 23:00'], 
       ['RX', 20, 10, 9, 20, 30, 20, 20, 20, 32, 20, 10, 9, 20, 30, 20, 20, 20, 32, 23, 12, 5, 14, 15], 
      ], 
      type: 'spline', 
      colors: { 
      RX:'#2d74d0', 
      }, 
     }, 
     tooltip: { 
      order: null, 
     }, 
     point: { 
      show: false 
     }, 
     axis: { 
      x: { 
       type: 'timeseries', 
       tick: { 
        multiline: false 
       } 
      }, 
      y: { 
       tick: { 
       format: function (y) { return y + 'GB'} 
       } 
      } 
     } 
    } 
).xgrids.add([ 
    {value: '2013-01-01 01:00', text: '01:00, Network 1'}, 
    {value: '2013-01-01 02:28', text: '02:28, Network 2'} 
]); 

私はあなたがあなたのC3の設定を次のように加えて、基本的な 'タイトル' ベースのツールチップを使用してにそれを突くことができjsfiddle https://jsfiddle.net/tekp7vvc/

Answer 1

に例を掲載：

onrendered: function() { 
    var xg = d3.selectAll(".c3-xgrid-lines text"); 
    xg.each (function (d,i) { 
     var title = d3.select(this).select("title"); 
     if (title.empty()) { 
     title = xg.append("title"); 
     } 
     title.text (function (d) { 
     return "Gridline: "+d.value+", "+d.text; 
     }) 
    }) 
}, 

https://jsfiddle.net/tekp7vvc/1/

グリッド線の上にカーソルを置いたときに機能するように設定されています。そうでない場合は、機能と競合しますグリッド線がデータポイント（1.00amデータポイント）と同じ位置にある場合、ツールチップ内のデータを表示するために使用します。

oninitではなくonrenderedで実行するように設定されています。あなたのグリッド線はまだ追加されていません。