D3：如何去除Y轴顶部和底部的刻度线

Question

我不知道如何关闭 D3 图表中 y 轴顶部和底部的这些刻度线。任何帮助将不胜感激！

这是我生成轴的方法：

// Set the ranges
var xScale = d3.time.scale().range([0, width]);
var yScale = d3.scale.linear().range([height, 0]);

// Define the axes
var xAxis = d3.svg.axis().scale(xScale)
  .orient("bottom")
  .ticks(2)
  .tickFormat(formatTime);

var yAxis = d3.svg.axis().scale(yScale)
  .orient("left")
  .ticks(2)
  .tickFormat(d3.format("$,"));

Answer 1

它的缺点是你想使用方法

.outerTickSize()

并传递一个

0

值，如下所示：

d3.svg.axis().outerTickSize(0)

请参阅文档了解更多信息。

Answer 2

您可以使用此脚本删除 y 轴上的所有刻度。

d3.selectAll(".y.axis").selectAll(".tick").selectAll("line").remove();

Answer 3

更好地使用CSS

.y.axis .tick line:first-child, 
.y.axis .tick line:last-child{
   opacity: 0;
}