如何隐藏 nvd3 图表上的第一条 Y 轴?
How to hide first Y Axis line on an nvd3 chart?
Plnkr 示例:
http://plnkr.co/edit/19D5cnrVYdUrMlblQARy?p=preview
我的应用截图:
我试过修改 CSS,但我只能删除第二条(右 Y 轴线),但不能删除第一条左 Y 轴线。
我尝试过的:
.nv-y {
display: none;
}
以及此答案中的所有行:
d3.selectAll('.nv-y').attr('display','none')
d3.selectAll('.nv-y path').attr('opacity','0.1')
d3.selectAll('.nv-y path').attr('display','none')
我当前的 drawChart 函数:
function drawChart(res) {
console.log(' ');
console.log('drawChart res = ',res);
nv.addGraph(function() {
var chart = nv.models.linePlusBarChart()
.margin({top: 30, right: 40, bottom: 50, left: 40})
.x(function(d,i) { return i })
.y(function(d) { return d[1] })
.color(d3.scale.category10().range());
chart.xAxis.tickFormat(function(d) {
var dx = res[0].values[d] && res[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(',f')(d) });
chart.bars.forceY([0]);
//
chart.lines.interactive(false);
// http://nvd3-community.github.io/nvd3/examples/documentation.html#line
chart.height(280);
// If not chart data is avaliable to display:
chart.noData("There is no Data to display at the moment.");
// Remove legend:
chart.showLegend(false);
d3.select('#chart svg')
.datum(res)
.transition().duration(500)
.call(chart);
d3.selectAll('.nv-y path').attr('display','none');
nv.utils.windowResize(chart.update);
return chart;
});
}
如果您想隐藏第一个 y 轴,请执行以下操作:
.nv-y1{
display:none;
}
如果您想隐藏第二个 y 轴,请执行以下操作:
.nv-y2{
display:none;
}
使用这个:
.domain {
display: none;
}
Plnkr 示例: http://plnkr.co/edit/19D5cnrVYdUrMlblQARy?p=preview
我的应用截图:
我试过修改 CSS,但我只能删除第二条(右 Y 轴线),但不能删除第一条左 Y 轴线。
我尝试过的:
.nv-y {
display: none;
}
以及此答案中的所有行:
d3.selectAll('.nv-y').attr('display','none')
d3.selectAll('.nv-y path').attr('opacity','0.1')
d3.selectAll('.nv-y path').attr('display','none')
我当前的 drawChart 函数:
function drawChart(res) {
console.log(' ');
console.log('drawChart res = ',res);
nv.addGraph(function() {
var chart = nv.models.linePlusBarChart()
.margin({top: 30, right: 40, bottom: 50, left: 40})
.x(function(d,i) { return i })
.y(function(d) { return d[1] })
.color(d3.scale.category10().range());
chart.xAxis.tickFormat(function(d) {
var dx = res[0].values[d] && res[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(',f')(d) });
chart.bars.forceY([0]);
//
chart.lines.interactive(false);
// http://nvd3-community.github.io/nvd3/examples/documentation.html#line
chart.height(280);
// If not chart data is avaliable to display:
chart.noData("There is no Data to display at the moment.");
// Remove legend:
chart.showLegend(false);
d3.select('#chart svg')
.datum(res)
.transition().duration(500)
.call(chart);
d3.selectAll('.nv-y path').attr('display','none');
nv.utils.windowResize(chart.update);
return chart;
});
}
如果您想隐藏第一个 y 轴,请执行以下操作:
.nv-y1{
display:none;
}
如果您想隐藏第二个 y 轴,请执行以下操作:
.nv-y2{
display:none;
}
使用这个:
.domain {
display: none;
}