0

おはようございます、

D3を使ってコードダイアグラムを作成しました。しかし、Chrome の一部のバージョンでパスが適切にレンダリングされないという出力の問題が発生しました。

D3 によって生成される問題のあるパスの例を次に示します。

<svg height="1000px" width="1000px">
    <g transform="translate(400,400)">
    <path d="M329.2336690603744,-46.49130195040491A332.5,332.5 0 0,1 329.2336694247276,-46.491299370194035Q 0,0 -25.421977592957564,-331.5267305290222A332.5,332.5 0 0,1 -25.42197499477598,-331.5267307282548Q 0,0 329.2336690603744,-46.49130195040491Z" class="chord" fill="#c8cfdc" stroke-width="1px" stroke="#000000"></path>
    </g>
</svg>

ほとんどのブラウザーでは、1 つの円弧が表示されますが、これは私が期待するものです。しかし、Ubuntu 14.04 で Chrome バージョン 36.0.1985.125 を実行している開発マシンでは、大きな灰色の円の上に円弧が表示されます。大きな円のようなものは、ダイアグラムの残りの部分を台無しにします。

このパスの d 属性に関して特に問題があり、ブラウザによって一貫性のない描画が行われる可能性がありますか?

どうもありがとう。

これは、うまくいかないときに私が見ているもののイメージです。 ここに画像の説明を入力

4

1 に答える 1

2

@jshanley のコメントを拡張すると、パス データの内訳は次のようになります (読みやすくするために長い小数点以下は省略されています)。

d="M 329,-46
   //Move the pen to the starting point (329,-46)

  A 332.5,332.5 0 0,1 329,-46
   //draw a circular arc (radius in both directions 332.5 with 0 degrees rotation), 
   //in a clockwise direction taking the shortest route (flags 0,1)
   //ending at point (329,-46).

   //In a normal chord diagram, this is the edge of the chord, which follows the
   //arc of the large circle.

   //However, in this case the start and end points are the same 
   //and nothing should be drawn

  Q 0,0 -25,-331
   //draw a quadratic curve to point (-25, -331) using control point (0,0)
   //this is the curve you see, connecting different points on the large circle

  A 332.5,332.5 0 0,1 -25,-331
   //another arc with the same start and end points, which shouldn't be drawn

  Q 0,0 329,-46
   //Another quadratic curve, the exact same shape as the previous one
   //but going back in the opposite direction;
   //this is what causes the curve to look like a single line, no fill

  Z" 
   //close the shape

これは、使用している Ubuntu Chrome バージョンの明確なバグです。 同じポイントで開始および終了するパス アーク セグメントは、明確に定義されていないため、フラグの設定に関係なく、スキップされることになっています。ブラウザが自動的にそれをスキップしなかったとしても、ブラウザは「短い円弧」フラグを尊重し、長さゼロの円弧を描くと思うでしょう。

その特定のブラウザー バージョンのサポートが重要な場合は、コードにエラー チェックを追加する必要があります。これにより、コードの両端の幅が 0 の場合にコードをまったく描画しないようにするか、パスを手動で編集します。空の円弧コマンドを削除するためのデータ。

于 2014-10-10T20:42:49.777 に答える