d3.js替代axis.tickSubdivide？

Question

我想在D3的轴上绘制小数.但在最新的D3中似乎是不可能的.

有了axis.tickSubdivide()函数来绘制小数,但我认为这已被弃用.(https://github.com/mbostock/d3/commit/bd0ce6cab8a2b0d2aaffc7ce21a873fc514eb8ed)

并且axis.tickSubdivide()不再位于API(https://github.com/mbostock/d3/wiki/API-Reference)上.

我尝试使用axis.innerTickSize,但它没有用.

有什么方法可以在轴上绘制单词吗？

我找到了一个使用axis.tickSubdivide()的例子(http://bl.ocks.org/GerHobbelt/3605124),但我无法弄清楚它是如何工作的,即使嵌入式d3.v3.min.js说" n.tickSubdivide = function(){return arguments.length && n}",它不做任何事情只返回轴.

Answer 1

执行此操作的新方法是使用多个轴,一个用于主要刻度线,另一个用于次要刻度轴.您可以选择也显示在次要轴上的刻度线并删除它们:

svg.append("g")
  .attr("class", "grid")
  .attr("transform", "translate(0," + height + ")")
  .call(d3.svg.axis().scale(x).ticks(20).tickSize(-height))
  .selectAll(".tick")
  .data(x.ticks(10), function(d) { return d; })
  .exit()
  .classed("minor", true);

svg.append("g")
  .attr("class", "axis")
  .attr("transform", "translate(0," + height + ")")
  .call(d3.svg.axis().scale(x).ticks(10));

在这里完成示例.

Answer 2

绘制两个轴的一种替代方法是先绘制所有刻度，然后重新选择它们并根据其数据或索引值调整其样式。

示例和更多说明在这里：https :
//stackoverflow.com/a/21583985/3128209

这种方法有一些好处：

• 您可以制作多个级别的刻度线样式，而不仅仅是主要/次要样式，而无需在代码中添加其他复杂性
• 您的DOM变得更加干净，只有一个轴组和一组刻度标签

但是，您不能轻易做到的一件事就是使带有刻度线的轴和横跨绘图区域的网格都像在Lars的示例代码中一样。