1

目盛りが実際に軸と交差し、目盛りと軸が異なる色であるd3.jsの軸に対して次の効果を達成するにはどうすればよいですか。

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

目盛りのストローク幅を設定できますが、配置/オフセットする方法がわかりません。

更新: 以下の Lars の回答は目盛りの配置に役立ちますが、パス要素が目盛りの後に来るため、目盛りを軸に重ねることができず、"z-index" が高くなります。したがって、答えの 2 番目の部分では、パス要素を、次のリストに含まれる 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 に答える