Question

我使用NVD3的MultiChart创建堆叠条形图加线。我稍微修改了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');

希望有所帮助

NVD3堆叠条形图加上线重叠

1 个答案: