4

これはFirefoxで正常に動作するように見えるため、Chromeのバグだと思いますが、誰かが回避策を推奨してくれることを期待していました（または、これが私のせいである場合は、どこが間違っているのか教えてください）。

この例と同様の方法で、コード図のグループアークにラベルを配置しようとしています。http： //bost.ocks.org/mike/uberdata/：

ここに画像の説明を入力してください

私はtextPath例のようにこれを達成するために使用しています。私の場合の違いは、アークが作成されたときにアークを開き、データが変更されたときにアークのサイズを変更するトランジションを実行していることです。pathによって参照されるトランジションを使用するtextPathと、結果として、テキストがChromeにすぐに表示されません。期待どおりにDOMに存在し、ブラウザのズームを調整するなどの操作を行うと、テキストが表示されます。

問題を示すサンプルコードは次のとおりです：http： //bl.ocks.org/3148920

パストランジションにを設定しtransition.each("end",...)、textPathの属性をタッチすると、テキストが表示されます。ただし、アークのサイズを変更する場合、これは役に立ちません。その間、テキストをパスと組み合わせてフロートさせます。Firefoxではこれは機能しますが、Chromeではテキストはそのまま残ります。

これを機能させる方法についてのアイデアはありますか？

4

1 に答える 1

11

ここであなたの例をフォークして修正しました：

WebKitブラウザで2つのバグを引き起こしました：

  • WebKitで大文字と小文字が区別される要素名を処理する方法にバグがあるため、textPath要素を選択できません。バグ83438を参照してください。残念ながら、WebKitはこのバグを修正する兆候を示していません。

  • パス要素を単独で更新しても、このパスを参照する依存要素の再描画はトリガーされません。そのため、パスを更新しても、参照しているtextPath要素は再描画されません。この更新のバグを回避するために、textPathのxlink：href属性を「#path」に繰り返し設定するカスタムトランジションを作成します。これについてすでにバグが報告されているかどうかはわかりません。

注：テキストは、アニメーションの開始時にアークの開始時に縮められ、読みにくくなります。達成しようとしていることに応じて、代わりに円弧を使用してテキストをクリップし、円弧が拡大するときにテキストが表示されるようにすることもできます。

于 2012-07-20T15:20:56.527 に答える