NVD3.js multiChart x軸ラベルは複数の線に配置されますが、複数のバーには配置されません
Nvd3 Js Multichart X Axis Labels Is Aligned Multiple Lines
解決：
ここでの問題はnv.models.multiChartは、x軸に線形スケールを使用し、バーを描画するときに呼び出しますnv.models.multiBarは、次の順序スケールを使用します。.rangeBands（）。
あなたはソースコードを通してこの混乱に従うことができます：
まず見てみましょうmultiChart.js
ここで、xスケールを線形スケールに設定します。
ここでは、バーを作成するためのnv.models.multiBarモデル。
飛び越えて見てみるとmultiBar.js
ここでは順序スケールを作成し、ここではを使用してスケールの範囲を設定します.rangeBands（）
その結果、バーの配置に使用される順序スケールと、チャートの軸に使用される線形スケールが整列しません。軸にプロットした場合、2つのスケールがそれ自体でどのように見えるかを次に示します。
解決策は、チャートに、棒で使用される順序スケールの観点から線グラフとx軸をレンダリングするように強制することです。バーとラインはすべてx軸に同じデータを使用するため、これはあなたのケースで機能します。これは、nvd3に依存せずに独自のグラフを作成している場合に行うのは非常に簡単です。これは、前の質問に対する私の回答で示したとおりです。 nvd3内で作業しようとしている場合、これを行うのは非常に複雑であり、他の多くの人がnvd3チャートで使用されるデフォルトのスケールを切り替えようとして失敗しました。たとえば、2013年1月から公開されているnvd3githubページでこの問題を確認してください。
バーの順序スケールを再利用するために自分でいくつかのアプローチを試しましたが、ほとんど成功しませんでした。自分で突っ込んでブルートフォース攻撃を試みたい場合は、私の実験から、使用時に最も接近したことがわかります。chart.bars1.xScale（）。copy（）を使用して、バーのスケールのコピーを作成し、そのドメインとrangeBandsを設定します。残念ながら、チャートの幅はレンダリング時に計算されるため、フックを作成できないようです。chart.update関数では、rangeBandsの範囲を正しい値に設定することはできません。
つまり、ラベルがオフセットされた状態で生活できない場合は、nvd3を使用せずに独自のグラフをコーディングするか、視覚化のために別の種類のレイアウトを見つける必要があります。
NVD3v1.7.1ソースコードを 非常に jshanleyの回答によって提供された有益なガイダンス、私はなんとか答えを思い付くことができたと思います（おそらく良い解決策というよりは応急修理です）。
私がしたことは、x軸のラベルをバーに揃え、ラインデータポイントをバーに揃えることでした。
1.1。 x軸のラベルを揃えるために、x軸を右にシフトして、最初のラベルが最初のバーの中央の下に表示されるようにしました。次に、最後のラベルを左にシフトして、最後のバーの中央の下に表示されるようにしました。こちらのコードをご覧ください。シフトする量は、描画時に次を使用して計算されます
.rangeBand（）およびに保存されますrbcOffset変数（変更する必要がありましたこれが機能するためのmultiBar.js）。1.2。ラインデータポイントをバーに揃えるには、同様のシフトも必要です。幸いなことに、この部分は簡単です。
scatter.js（折れ線グラフで使用）には、すでに必要なことを実行するpadDataブール変数。だから基本的にはpadDataをtrueに設定すると、線がシフトしてバーに揃えられます。こちらを参照してください。NVD3と適切に統合し、すべてを美しく見せるために、いくつかの追加の変更が必要です。 GitHubでNVD3をフォークしたので、そこで完全なソリューションを確認できます。もちろん、貢献は大歓迎です。
最後のソリューションを使用して実行します。だから、あなたは指定することができます
lines1.padData（true）
線を揃えるためにも。