1

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

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

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

更新：下面拉斯的回答有助于定位刻度，但它不允许我让刻度与轴重叠，因为路径元素位于刻度标记之后，因此它具有更高的“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>
4

1 回答 1

2

刻度线被分配给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();
于 2013-04-02T19:26:23.393 回答