44

(優れた) D3.js を使用していくつかのプロットを生成していますが、x 軸と y 軸から終了の目盛りを削除する方法が見つかりません。

y 軸を例にとってみましょう。

終了ティック値がラベルと一致する場合は、それで問題ありません。

しかし、最後のラウンド ラベルがプロットの末尾より下にある場合、2 つの目盛りが表示されます。

ラベル間の通常の間隔よりも短い間隔で表示されるという事実が気になるため、このエンドティックを表示したくありません。

私が説明していることの例については、ここを参照してください。目盛り0と目盛り15は終わりの目盛りです。

15 ─┐ 
    | 
10 _| 
    |
5  _|
    |
0  ─┤──────

任意のヒント?

PS応答が示唆したように、ティックを明示的に設定できました。しかし、暗黙的に生成された目盛りの便利さが好きです。ラベルのない目盛りが軸を汚染したくないだけです。したがって、理想的な解決策(存在する場合)も考慮に入れます。

4

8 に答える 8

117

あなたがしたいのは軸から2つの終了目盛りを削除することだけなので、この質問にたどり着いた人にとっては、これでうまくいきます:

.outerTickSize(0)

次のような軸呼び出しにそれを追加します。

d3.svg.axis().outerTickSize(0)
于 2015-01-27T17:21:58.510 に答える
20

axis.tick*関数はそこで役立ちます。説明している動作を防ぐ可能性はいくつかあります。関数を使用してティックを明示的に設定できtickValues()ます。または、 を使用して終了ティックのサイズを 0 に設定することもできますtickSize()。関数を使用して、基になるスケールを制御することもできticks()ます。

特定のシナリオによっては、これらのオプションのいずれかが他のオプションよりも適切な場合があります。

于 2012-12-02T12:49:56.237 に答える
1

外側の目盛りサイズが軸の最初または最後の目盛りと何の関係があるのか​​ わかりません。


tickSize<line>目盛りグループ内の要素の長さを実際に制御します。したがって<text>、目盛りの要素と軸の間の距離、または目盛りの位置から始まるヘルパー線の長さを扱います。これは、軸の向きと移動先 ( css 経由translate()) に依存します。

ティック グループは次のようになります。

<g transform="translate(10,0)" style="opacity: 1;" class="tick">
   <line x2="0" y2="-15"></line>
   <text x="0" y="-18" style="text-anchor: middle;" dy="0em">0.0</text>
</g>

メソッドを使用して、要素の と属性を制御できるようにx2なりました。ここでは、グラフの下部に移動した x 軸にandを使用しています。そのため、ティックのラベルは非常に乱雑にチャートに投影されます。y2<line>tickSizetickSize(15, 0)orientation('top')

于 2015-12-15T07:39:45.093 に答える
-2

両方の軸を削除するだけです:

d3.selectAll('.axis').remove();
于 2019-03-27T10:28:53.660 に答える