Question

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

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

我可以设置刻度线的笔触宽度，但我无法弄清楚如何定位/偏移它。

更新： Lars的答案有助于定位刻度线，但它不允许我让刻度线与轴重叠，因为路径元素位于刻度线之后，因此它具有更高的“z-index”。因此，答案的第二部分将要求能够将路径元素移动到以下列表中包含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();

位置勾选到d3中的重叠轴

1 个答案: