javascript - D3.js:刻度之间可变间隔的 x 轴

Question

我在使用 D3.js 库时遇到问题。我试图在 x 轴代表不同染色体的图表中绘制染色体数据。这对于条形图等来说很容易完成。

但是，我想根据染色体位置绘制线性数据。滴答之间间隔的大小也应该与染色体的大小相关。

我的问题是，我应该使用哪种比例？我认为线性刻度不适合这个目的。我读过一些关于阈值尺度的内容，但我不知道这是否是最佳选择。有人有更好的主意吗？

谢谢!中号

tl;dr:我需要一个基于线性数据的刻度之间可变间隔的 x 轴，我该怎么做？

编辑:带例子的图片

Answer 1

找到答案了!

我只需要使用带有自定义刻度的线性刻度。这可以通过使用刻度格式化选项来设置。

//set axis
xAxis = d3.svg.axis()
.scale(x)
.orient("bottom")
.ticks(chrInfo.length)
.tickValues(d3.set(chrInfo.map(function(d) {return d.end;})).values())
.tickFormat(function(d){return d.chr;})
.tickSize(-(height), 0, 0);