在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)