Question

我想删除（或有效隐藏）nvd3图表的网格中的第一条垂直线。我认为这是我的图表的问题，但在测试之后，我意识到这似乎是一个更普遍的问题。

我通过运行以下行测试了它：

d3.selectAll('.tick, .nv-axislabel, .nv-axis text').attr('fill','#999999')

在控制台中，我可以找到最简单的折线图：http://nvd3.org/examples/line.html它仍然无法正常工作！它会改变的所有行，除了第一条垂直线。我感到困惑，我已经尝试了每个类型的组合，包括笔画，填充，不透明等等 - 我可以影响整个svg（使用不透明度），或者什么也不做。有人有什么想法吗？

编辑：

我本来应该指定这个，我道歉 - 我不想完全删除Y轴。我仍然需要标签和刻度标记 - 我只想删除一条垂直线（或至少使其变亮 - 它比我图表的其余部分暗得多）。

Answer 1

一种解决方案是指定要用于每个轴的刻度值数组。使用axis.tickValues([values])明确声明您想要的图表的XAxis刻度。因此，您可以将.tickValues([1, 2, 3, 5, 8, 13, 21]);弹出到chart.xAxis或chart.yAxis，并且只会从数组中的相应值显示标记。在您的情况下，您可能希望将其放在chart.xAxis变量中。但是，如果您想要一个动态图表，那么在图表中更新数据后，明确声明刻度值会产生问题。另一方面，如果您使用静态数据，这是一个非常简单的修复。我已经在他们的实时代码编辑器中测试了这个解决方案，它似乎可以解决问题。

请参阅https://github.com/mbostock/d3/wiki/SVG-Axes#ticks以查看可能有用的其他指令。

Answer 2

根据你的意见：你不想看到＆＃34;网格中第一条垂直线用于nvd3图表＆＃34; 哪个是y轴：实现这一目标的两种方法：选项1

var chart = nv.models.lineChart()
                .margin({left: 100})  //Adjust chart margins to give the x-axis some breathing room.
                .useInteractiveGuideline(true)  //We want nice looking tooltips and a guideline!
                .transitionDuration(350)  //how fast do you want the lines to transition?
                .showLegend(true)       //Show the legend, allowing users to turn on/off line series.
                .showYAxis(false)        //hide the y-axis
                .showXAxis(true);        //Show the x-axis

选项2：因为在您的示例中，您将使用CSS选项

d3.selectAll('.nv-y').attr('display','none')

我更喜欢Option1

编辑发布您的澄清，您希望使y轴线亮起，您可以使用：

d3.selectAll('.nv-y path').attr('opacity','0.1')

或者如果你想完全隐藏它

d3.selectAll('.nv-y path').attr('display','none')

改变nvd3中的第一个垂直网格线

2 个答案: