Question

我在D3中创建了一个带有自定义tickFormat的x轴。

每个月打印一个勾号，但将1月标记为年份，即2014年，2013年等。

var xAxis = d3.svg.axis()
    .scale(x)
    .orient('bottom')
    .ticks(d3.time.month, 1)
    .tickFormat(d3.time.format.multi([["%b", function(d) { return d.getMonth(); }], ["%Y", function() { return true; }]]))
    .tickSize(4)
    .tickPadding(8);

我也希望改变tickSize并对年份标记进行长时间的勾选。

但似乎没有使用函数来返回值。这应该为每个日期打印一个随机的刻度尺寸，但是失败了：

.tickSize(function(d){ return Math.random() * 50 })

Answer 1

这是你的答案。 Custom tick size on axis (d3js)

TLDR：tickSize只能接受数字，而不是函数。您需要在绘制它们之后选择它们，然后调整它们的大小。

Answer 2

axis.tickSize不接受函数作为参数。它只接受标量值或2个缩放器值的数组（内部刻度长度的一个值和域线末端的2个外部刻度的长度）。

如果您希望有条件地设置样式，您可以使用后期选择来绘制它们之后的刻度线，并直接设置它们的样式或设置CSS类以使它们选择您想要的样式。这里有一个很好的例子：D3 Axis Tick Post-selection。

根据刻度值更改D3刻度线的大小

2 个答案: