d3.js替代axis.js？

我想在D3的轴上画一个小圆点。 但在最新的D3中，这似乎是不可能的

有axis.tickSubdivide（）函数来绘制子条，但我认为这是不推荐的。（）

axis.tickSubdivide（）不再位于API（）上

我试过axis.com，但没用

有什么方法可以在轴上绘制子轴供我使用吗

---

我找到了一个使用axis.tickSubsection（）的示例（），但我不知道它如何工作，即使嵌入的d3.v3.min.js说“n.tickSubsection=function（）{return arguments.length&&n}”，它什么都不做，只返回轴。

实现这一点的新方法是有几个轴，一个用于主要刻度，另一个用于次要刻度。您可以选择也出现在短轴的长轴上的记号，然后将其删除：

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

---

完整示例。

绘制两个轴的替代方法是首先绘制所有记号，然后重新选择它们，并根据它们的数据或索引值调整它们的样式

示例和更多说明如下：

这种方法有几个好处：

• 您可以创建多个级别的勾号样式，而不仅仅是主/次勾号样式，而不会给代码增加额外的复杂性
• DOM最终变得更干净，只有一个轴组和一组记号标签

---

然而，有一件事你不容易做到，那就是在绘图区域中既要有一个带记号的轴，又要有一个网格，就像拉尔斯的示例代码一样。

在AmeliaBR的答案上进行了扩展，以满足我的要求。选择了我只想要记号的值，而不是记号和值，添加了“hide”类。但这可以用于主题的任何变化

            var gy = humiditySVG.append( "g" )
                .attr( "class", "y axis" )
                .attr( "transform", "translate(" + 154 + "," + 0 + ")" )
                .call( yAxis );

            humiditySVG.selectAll( "text" )
                .attr( "class", function ( d ) {
                                           if ( $.inArray(d, [0,50,100])==-1  ) {
                               return "subtick";
                           }
                           return;
                       } );
            humiditySVG.selectAll( "line" )
                .attr( "x2", function ( d ) {
                           if ( $.inArray(d, [0,50,100])==-1  ) {
                               return 1;
                           } else {
                               return 3;
                           }
                           return;
                       } );

---

我通过删除每隔一个勾号文本来解决这个问题：

d3.selectAll('g.x.axis .tick text').each(function(d,i){
    if(i%2==1){
      d3.select(this).remove()
    }
  })