NVD3 Stacked Bar Chart Plus Line Overlapped

Question

Я использую MultiChart от NVD3, чтобы создать сложную гистограмму и линию. Я немного модифицировал модели multiChart, чтобы заставить бары стать сложными. Теперь проблема в том, что строки находятся на задней панели, поэтому я не могу навести курсор на линии, чтобы увидеть всплывающую подсказку для строки. Есть ли какие-либо варианты в NVD3, чтобы довести линии до фронта?

Я создал JSFiddle здесь: http://jsfiddle.net/n2hfN/50/

Javascript источник:

var margin = { 
    top: 50, 
    right: 50, 
    bottom: 120, 
    left: 70 
}; 
var svg = "#chart svg"; 

var normalisedData = [{ 
    "key": "Group A", 
     "type": "bar", 
     "yAxis": 1, 
     "values": [{ 
     "x": 0, 
     "y": 6 
    }, { 
     "x": 1, 
     "y": 5 
    }, { 
     "x": 2, 
     "y": 3 
    }, { 
     "x": 3, 
     "y": 6 
    }, { 
     "x": 4, 
     "y": 9 
    }, { 
     "x": 5, 
     "y": 10 
    }] 
}, { 
    "key": "Group B", 
     "type": "bar", 
     "yAxis": 1, 
     "values": [{ 
     "x": 0, 
     "y": 5 
    }, { 
     "x": 1, 
     "y": 7 
    }, { 
     "x": 2, 
     "y": 5 
    }, { 
     "x": 3, 
     "y": 3 
    }, { 
     "x": 4, 
     "y": 9 
    }, { 
     "x": 5, 
     "y": 8 
    }] 
}, { 
    "key": "Group A Benchmark", 
     "type": "line", 
     "yAxis": 1, 
     "values": [{ 
     "x": 0, 
     "y": 0 
    }, { 
     "x": 1, 
     "y": 1 
    }, { 
     "x": 2, 
     "y": 0 
    }, { 
     "x": 3, 
     "y": 3 
    }, { 
     "x": 4, 
     "y": 0 
    }, { 
     "x": 5, 
     "y": 1 
    }] 
}, { 
    "key": "Group B Benchmark", 
     "type": "line", 
     "yAxis": 1, 
     "values": [{ 
     "x": 0, 
     "y": 1 
    }, { 
     "x": 1, 
     "y": 2 
    }, { 
     "x": 2, 
     "y": 1 
    }, { 
     "x": 3, 
     "y": 1 
    }, { 
     "x": 4, 
     "y": 2 
    }, { 
     "x": 5, 
     "y": 0 
    }] 
}]; 

var axisKeys = ["2014-Jan", "2014-Feb", "2014-Mar", "2014-Apr", "2014-May", "2014-Jun"]; 

nv.addGraph(function() { 
    var chart = nv.models.multiChart() 
     .options({ 
     reduceXTicks: false 
    }) 
     .margin(margin) 
     .color(d3.scale.category10().range()); 

    chart.xAxis.tickFormat(function (d) { 
     // If there is such element, return it 
     if (typeof axisKeys[d] !== "undefined") { 
      return axisKeys[d]; 
     } 
     return ""; 
    }); 

    // Get normalised data for chart 
    var seriesData = normalisedData; 

    chart.yDomain1([0, 20]); 

    // Set chart 
    d3.select(svg) 
     .datum(seriesData) 
     .call(chart); 

    // Auto resize chart on window resize 
    nv.utils.windowResize(chart.update); 

    return chart; 
}); 

HTML источник:

<div id="chart"> 
    <svg></svg> 
</div> 

Заранее спасибо!

Answer 1

рисовать линии после того, как после сложенных баров

gEnter.append('g').attr('class', 'bars1Wrap'); 
gEnter.append('g').attr('class', 'bars2Wrap'); 
gEnter.append('g').attr('class', 'stack1Wrap'); 
gEnter.append('g').attr('class', 'stack2Wrap'); 

gEnter.append('g').attr('class', 'lines1Wrap'); 
gEnter.append('g').attr('class', 'lines2Wrap'); 

Надеется, что это помогает