gpt4 book ai didi

d3.js - NVD3 堆积条形图加线重叠

转载 作者:行者123 更新时间:2023-12-01 23:51:12 24 4
gpt4 key购买 nike

我正在使用 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>

提前致谢!

最佳答案

在堆叠条之后画线

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');

希望对你有帮助

关于d3.js - NVD3 堆积条形图加线重叠,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26373756/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com