положение тика на ось перекрытия в d3

Question

Как добиться следующего эффекта для оси в d3.js, где метка метки фактически пересекает ось, а знак метки и ось - разные цвета.

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

Я могу установить ширину хода галочки, но я не могу понять, как ее позиционировать/смещать.

ОБНОВЛЕНИЕ: Ниже приведен ответ Ларса для позиционирования галочки, но это не позволяет мне галочку перекрывать ось, потому что элемент пути приходит после меток, поэтому он имеет более высокий «z-index» ». Таким образом, вторая часть ответа потребует возможность сместить элемент пути к началу вмещающего г в следующем листинге:

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