d3.js - 位置刻度以重叠 d3 中的轴

Question

我如何在d3.js中为一个轴实现以下效果，其中刻度线实际上与轴相交，并且刻度线和轴是不同的颜色。

  |
 ---
  |
 ---     |      |      |      |      |
  |======|======|======|======|======|
         |      |      |      |      |

我可以设置刻度线的笔触宽度，但我不知道如何定位/偏移它。

更新:
Lars 下面的回答有助于定位刻度线，但它不允许我让刻度线与轴重叠，因为路径元素位于刻度线之后，因此它具有更高的“z-index”。因此，答案的第二部分需要能够将路径元素移动到以下 list 中包含 g 的开头:

<g class="x axis" transform="translate(0,55)">
    <g style="opacity: 1;" transform="translate(50,0)">
        <line class="tick" y2="-55" x2="0" transform="translate(0,5)"></line>
        <text y="3" x="0" dy="1.5em" text-anchor="middle" style="font-size: 10px;">1955</text>
    </g>
    <g style="opacity: 1;" transform="translate(112.5,0)">
        <line class="tick" y2="-55" x2="0" transform="translate(0,5)"></line>
        <text y="3" x="0" dy="1.5em" text-anchor="middle" style="font-size: 10px;">1960</text>
    </g>
    <g style="opacity: 1;" transform="translate(175,0)">
        <line class="tick" y2="-55" x2="0" transform="translate(0,5)"></line>
        <text y="3" x="0" dy="1.5em" text-anchor="middle" style="font-size: 10px;">1965</text>
    </g>
    <path class="domain" d="M0,-55V0H800V-55"></path>
</g>

Answer 1

刻度线分配给 tick类。如果您为轴本身设置了一个类，您可以使用它来区分轴和刻度以设置颜色:

.axis { stroke: black; }
.tick { stroke: red; }

同样，您可以使用它来翻译刻度线。例如

xAxisElement.selectAll(".tick").attr("transform", "translate(0,-5)");

然后您可以使用 .sort() 和 .order()选择 g包含轴的元素，对它们进行排序，使轴线排在最后，并相应地重新排列文档中的元素。代码看起来像

d3.selectAll("axis *").sort(function(a,b) {
    if(a.nodeName == "path") { return -1; }
    else if(b.nodeName == "path") { return 1; }
    return 0;
}).order();