[Solved]-Change bar chart to line chart in D3-d3.js

An updated jsfiddle is available here. Besides the line chart part, I did the following steps:

Create a scales object to get one scale per chart:

var scales = {};
fields.forEach(function(f){
  var currentData  = test.filter(function(d){return d.name===f;})[0].data;
  scales[f]= d3.scale.linear()
               .domain([0, d3.max(currentData, function(d) {return d.value})])
               .range([lineHeight, 0])
               .nice();
 });

Add a mousemove to the dispatch:

var dispatch = d3.dispatch('hideTooltip', 'iTooltip', 'mousemove');

Append a text to each chart to display the tooltip:

alphaWrap.append('text')
        .classed('tooltip', true)
        .style('text-anchor', 'end')
        .style('fill', function(d){return colorScale(d.name)});

Append a rect on each chart to subscribe to the mousemove event.

When the mouse moves, I get its position, compute the corresponding date, and dispatch it:

alphaWrap.append('rect')
        .attr('x', 0)
        .attr('y', 0)
        .attr('width', xScale.range()[1])
        .attr('height', lineHeight)
        .style('pointer-events', 'all')
        .style('fill', 'transparent')
        .on('mousemove', function(d,i){
            var mouse=d3.mouse(this);
            var date = xScale.invert(mouse[0]);
            dispatch.mousemove(date);
        });

Append a line over all 3 charts:

d3.select('#chart-container')
      .append('line')
      .classed('tooltip', 'true')
      .style('stroke', 'darkgray')
      .attr('x1',90)
      .attr('x2',90)
      .attr('y1',0)
      .attr('y2',fields.length*plotHeight);

React to the dispatch mousemove event

I created a bisector to find the index of the closest date in the array of data for the chart. Thanks the date and, the bisector, the line can be moved appropriately, and the value of the tooltip can be displayed

var bisector = d3.bisector(function(d){return d.date}).right;
dispatch.on('mousemove', function(date){
  d3.select('line.tooltip')
    .attr('transform', 'translate('+xScale(date)+',0)')
  alphaWrap.select('text.tooltip')
        .attr('transform', function(d,i){
          var value = bisector(d.data, date);
          return 'translate('+xScale(date)+','+scales[d.name](d.data[value].value)+')';
        })
        .text(function(d,i){
          var value = bisector(d.data, date);
          return d3.format('2.2f')(d.data[value].value);
        });
    });