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）

d3刻度轴上两侧刻有标记

1 个答案: