admin管理员组文章数量:1287788
I put together the following test code based on the example code provided by the NVD3 team at the library's official website. For some reason, I always see two charts drawn on the page: one has the proper labels on the two Y-axes and the proper labels on the X-axis while the second is more pressed vertically, does not have any labels on the Y-axes and has what appears to be data array indices on the X-axis.
The code below assumes the latest versions of both D3 and NVD3 although this behavior still manifests even when using the older version of D3 that the website links to.
Thanks in advance for any help and insight into this problem.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<title>Line + Bar Chart | NVD3.js</title>
<link rel="stylesheet" href="nv.d3.css"/>
<style>
#chart svg {
height: 400px;
}
</style>
</head>
<body>
<div id="chart">
<svg></svg>
</div>
<script src="d3.js"></script>
<script src="nv.d3.js"></script>
<script>
var data = [
{
'key': 'foo',
'bar': true,
'color': 'skyblue',
'values': [
[1431993600000, 31.6882],
[1432080000000, 76.1706],
[1432166400000, 76.2297],
[1432252800000, 75.1944],
[1432339200000, 75.1536],
[1432425600000, 74.528],
[1432512000000, 75.7265],
[1432598400000, 75.8659],
[1432684800000, 74.6283],
[1432771200000, 73.3533]
]
},
{
'key': 'bar',
'color': 'steelblue',
'values': [
[1431993600000, 0.0002997961386257345],
[1432080000000, 0.0004418193656404055],
[1432166400000, 0.0003122142681920564],
[1432252800000, 0.00031651293181407124],
[1432339200000, 0.0003845457835685849],
[1432425600000, 0.00031934306569343066],
[1432512000000, 0.0005163317993040745],
[1432598400000, 0.00042575122683577205],
[1432684800000, 0.00025057518394496457],
[1432771200000, 0.00041715914621428076]
]
}
];
nv.addGraph(function () {
var chart = nv.models.linePlusBarChart()
.margin({
top: 30,
right: 60,
bottom: 50,
left: 70
})
.x(function (d, i) {
return i;
})
.y(function (d, i) {
return d[1];
});
chart.xAxis
.showMaxMin(true)
.tickFormat(function (d) {
var dx = data[0].values[d] && data[0].values[d][0] || 0;
return d3.time.format('%x')(new Date(dx));
});
chart.y1Axis
.tickFormat(d3.format(',f'));
chart.y2Axis
.tickFormat(function (d) {
return d3.format('g')(d)
});
chart.bars.forceY([0, 200]);
chart.lines.forceY([0]);
d3.select('#chart svg')
.datum(data)
.transition()
.duration(0)
.call(chart);
nv.utils.windowResize(chart.update);
return chart;
});
</script>
</body>
</html>
I put together the following test code based on the example code provided by the NVD3 team at the library's official website. For some reason, I always see two charts drawn on the page: one has the proper labels on the two Y-axes and the proper labels on the X-axis while the second is more pressed vertically, does not have any labels on the Y-axes and has what appears to be data array indices on the X-axis.
The code below assumes the latest versions of both D3 and NVD3 although this behavior still manifests even when using the older version of D3 that the website links to.
Thanks in advance for any help and insight into this problem.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<title>Line + Bar Chart | NVD3.js</title>
<link rel="stylesheet" href="nv.d3.css"/>
<style>
#chart svg {
height: 400px;
}
</style>
</head>
<body>
<div id="chart">
<svg></svg>
</div>
<script src="d3.js"></script>
<script src="nv.d3.js"></script>
<script>
var data = [
{
'key': 'foo',
'bar': true,
'color': 'skyblue',
'values': [
[1431993600000, 31.6882],
[1432080000000, 76.1706],
[1432166400000, 76.2297],
[1432252800000, 75.1944],
[1432339200000, 75.1536],
[1432425600000, 74.528],
[1432512000000, 75.7265],
[1432598400000, 75.8659],
[1432684800000, 74.6283],
[1432771200000, 73.3533]
]
},
{
'key': 'bar',
'color': 'steelblue',
'values': [
[1431993600000, 0.0002997961386257345],
[1432080000000, 0.0004418193656404055],
[1432166400000, 0.0003122142681920564],
[1432252800000, 0.00031651293181407124],
[1432339200000, 0.0003845457835685849],
[1432425600000, 0.00031934306569343066],
[1432512000000, 0.0005163317993040745],
[1432598400000, 0.00042575122683577205],
[1432684800000, 0.00025057518394496457],
[1432771200000, 0.00041715914621428076]
]
}
];
nv.addGraph(function () {
var chart = nv.models.linePlusBarChart()
.margin({
top: 30,
right: 60,
bottom: 50,
left: 70
})
.x(function (d, i) {
return i;
})
.y(function (d, i) {
return d[1];
});
chart.xAxis
.showMaxMin(true)
.tickFormat(function (d) {
var dx = data[0].values[d] && data[0].values[d][0] || 0;
return d3.time.format('%x')(new Date(dx));
});
chart.y1Axis
.tickFormat(d3.format(',f'));
chart.y2Axis
.tickFormat(function (d) {
return d3.format('g')(d)
});
chart.bars.forceY([0, 200]);
chart.lines.forceY([0]);
d3.select('#chart svg')
.datum(data)
.transition()
.duration(0)
.call(chart);
nv.utils.windowResize(chart.update);
return chart;
});
</script>
</body>
</html>
1 Answer
Reset to default 13This second char is a focus chart — it allows user to select and magnify particular part of the main chart.
To disable it, just set focusEnable option to false, like this:
nv.addGraph(function () {
var chart = nv.models.linePlusBarChart()
.margin({
top: 30,
right: 60,
bottom: 50,
left: 70
})
.x(function (d, i) { return i; })
.y(function (d, i) { return d[1]; });
.options({focusEnable: false}); // here it is
// ...
return chart;
});
P.S. Here's live example of you chart that I've used to figure out an answer: http://jsfiddle/7ms6041o/2/ with focusEnable option set to false.
版权声明：本文标题：javascript - Why does the NVD3.js line plus bar chart example render two charts instead of one? - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1741328309a2372618.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论