問題タブ [text-rotation]

D3JS を使用してグラフを作成しましたが、正常に動作しています。ただし、円弧内で別のテキストの回転を設定したいのですが、その方法がわかりません。

左のチャートには、現在の配置が含まれています。右の図が希望のものです。テキストの回転のみが欠落しています。

現在および望ましいテキストの配置 - 画像

HTML コードと Json データ: https://dl.dropboxusercontent.com/u/75479878/HtmlAndJson.zip

それが変更する必要があるコードだと思いますが、方法がわかりません：

私は一見単純な問題で半日戦ったが役に立たなかったので、スタックオーバーフローの天才から良いアドバイスを得たい.

http://62.165.130.126/d3-questionにデモがあります

私はそれをjsfiddleに入れようとしましたが、ライブラリを正しく取得できませんでした.これであなたが飛び込むことができることを願っています.

テキストの回転が消えると、d3.js JavaScript コードで問題が発生します。または、実際には回転テキストの一部です。

ページ上のバーの各ペアには、隣接するバーを上書きしないように、45 度 (下り坂) 回転した 2 行のテキストが必要です。テキストを回転しないと、すべてが表示されます (重なっています) が、そうすると、最初の行のペアだけが問題ありません。その後、最初のテキストは消えます (または、いくつかのバージョンでは、何十ピクセルも無計画に配置されているように見えます) が、2 番目のテキストは、まったく同じコード構造を使用する必要がある場所に配置されます。値を交換しましたが、問題は値ではなく順序に関連しています。

これが私が書いたjavascriptのメインコードです。

アプリケーションは実際のソリューションのモックアップにすぎませんが、気を散らすことなく本質的な問題を示す必要があります。バーの各ペアには、その下に説明テキストが必要です。現在、それらはまだ中央に配置されていませんが、状況が整理されれば、その変更は簡単になるはずです。

コードを修正する方法を知っている人はいますか?

角度0、90、180、270を使用している場合も、ランダムに生成、回転、およびこのビューに配置された複数のUILabels用のUIVewコンテナーを用意しますが、角度がランダムに生成されたラベルが展開されているように見える場合、これは私にとって問題です。交差せずに非常に近くに配置すると、次のようにジェネレーターが表示されます。

これはどのように正しく配置されたラベルに見えますか:

ランダムに生成された角度 (範囲 270 ～ 360、0 ～ 90) を持つこの短い単語の例:

お気づきのように、そこにテキストが表示されず、ラベルが展開されているように見え、この場合交差チェッカーが機能していません。また、から呼び出された関数viewDidLoadまたはviewDidApperこのチェッカーがまったく機能していない場合、本当に助けが必要です。何かアイデアはありますか? ありがとうございました！

なんらかの理由で、私のテキストローテータはゴーストファントムの境界線を上に、時には左側に表示します。この問題は Chrome ブラウザでのみ発生します。Firefox と Safari で確認すると、すべて問題ないようです。

Chrome ブラウザでのみ発生するこのファントム ボーダーを修正するにはどうすればよいですか?

コードペンの例はこちら

スタックオーバーフローは、この問題に関する詳細を追加するように私に求めているので、このテキストはこの質問をライブに移動するだけです =)

PS: Chrome ブラウザでのみ問題が発生します。バージョン 63.0.3239.84 (公式ビルド) (64 ビット)