d3 刻度上轴两侧的刻度线

Question

我试图让刻度线出现在 y 轴的两侧。如下所示，我可以根据长度-width 来扩展刻度线，它从起点从左到右绘制刻度线。

是否可以将刻度线的起点进一步向左移动？

我的意图是美学，但让刻度值直接超过刻度线的长度。

我设置了一个网格，由容器长度的刻度线组成：

// Axis
var xAxis = d3.svg.axis()
    .scale(x)
    .orient("bottom")
    .tickSize(-height);

var yAxis = d3.svg.axis()
    .scale(y)
    .orient("left")
    .tickSize(-width)
    .tickFormat(d3.format("s"));

基于这些尺度：

// Scale
var x = d3.time.scale()
    .range([0, width]);

var y = d3.scale.linear()
    .range([height, 0]);

我的轴像这样附加到 svg：

svg.append("g")
    .attr("class", "x axis")
    .attr("transform", "translate(0," + height + ")")
    .call(xAxis)
    .call(adjustXLabels);

svg.append("g")
    .attr("class", "y axis")
    .call(yAxis)
    .call(adjustYLabels);

Answer 1

我对你的追求有点困惑。您是否希望刻度标签与刻度本身重叠？如果是这样，您可以在绘制轴后选择文本，然后平移刻度。

在这里查看小提琴：https://jsfiddle.net/6q3rpw6j/

关键位是：

svg.append("g")
    .attr("class", "y axis")
    .call(yAxis)
    .selectAll(".tick text")
    .attr("transform", "translate(15,0)");

编辑

要自己移动刻度：

svg.append("g")
  .attr("class", "y axis")
  .call(yAxis)
  .selectAll(".tick line")
  .attr("transform", "translate(15,0)");

要删除顶端和底端刻度，请确保设置 .outerTickSize(0)