Question

我制作了一个带有取景器的折线图。

这是我的初始代码

     var chart = nv.models.lineWithFocusChart();

 // chart.transitionDuration(500);
  chart.xAxis
      .tickFormat(d3.format(',g'));
  chart.xAxis
        .axisLabel("Date");
  chart.xAxis.tickPadding(0);


  chart.x2Axis
      .tickFormat(d3.format(',g'));




  chart.yAxis
      .tickFormat(d3.format(',.2g'));
  chart.y2Axis
      .tickFormat(d3.format(',.2h'));
 // chart.showYAxis(false);

我想删除y轴标签（即我不想在y轴上显示数字）。

我也想删除所有网格线。

是否有像chart.yAxis.something那样的东西？

由于

Answer 1

删除y轴上的刻度

.nv-axis.nv-y .tick line {
        display:none;
    }

删除x轴上的刻度

.nv-axis.nv-x .tick line {
        display:none;
    }

删除x轴上的标签

.showXAxis(false)

删除y轴上的标签

.showYAxis(false)

删除所有网格线

.nv-axis .tick line {
        display:none;
    }

Answer 2

.showYAxis(false)应删除y轴。

如果这不起作用，您可以将.nv-y text{display: none;}应用为样式。

使用样式.tick line {display: none;}去掉网格线，并保持x轴。

使用.tick{display: none;}

删除所有轴和线

：）

Answer 3

删除网格线：

    .nv-axis .tick line {
        display:none;
    }

轴可以更直接地完成：

.showYAxis(false)
.showXAxis(false)

Answer 4

要隐藏网格线，只需将其添加到您的css

即可

.tick line {
display: none;
}

并且对于X轴，只需添加.showYAxis(false)

如果您只想删除yAxis行并保留勾号，可以使用CSS执行：

.nvd3 .nv-axis.nv-y path.domain{
 stroke-opacity: 0;
}

例如，请参阅此plunker。

nvd3折线图，如何删除网格线和y轴

4 个答案: