d3 clipPath - なぜチャートの上を切っているのですか？

Question

私は3つの折れ線グラフを持つグラフィックを持っています。

グラフに3つの折れ線グラフをすべてカバーするclipPathを1つ追加しました。しかし、各折れ線グラフの最上部が切り取られています。

問題を解決するのに役立ちましたが、他のSO回答に基づいてy軸に.nice（）を追加しました。タイムウィジェットでズームインすると、その効果は非常に明白です。ラインの最高点では、2ピクセルのラインが間引かれています。 clip-pathの属性を取り除くと、行が適切な効果を返します。

cG.append("path") 
    .attr("class","line line1") 
    .attr("stroke",palette.basic[0])//predicted 
    .attr("clip-path", "url(#clip)") 
    .attr("d",line1[q](pricesPredicted)); 

これがなぜ起こっているのか、どのように停止するのか誰にも分かりますか？

おかげ

Answer 1

問題がclipPath、あなたがクリッピングされている要素は同じ座標系で定義されていないし、同じ変換の対象とならないことです。

3つのチャートは、すべて左上隅から描画されています。それらのすべてがお互いの上に描かれていると想像してください。

次に、clipPathが適用され、グラフが切り捨てられます。

最後に、図表がその場所に翻訳されます。

ここでは例です：

<svg> 
 
    <defs> 
 
    <clipPath id="clipPath"> 
 
     <rect x="0" y="0" width="100" height="100" /> 
 
    </clipPath> 
 
    </defs> 
 

 
    <circle cx="10" cy="10" r="20" style="clip-path: url(#clipPath);" transform="translate(10 10)" /> 
 
</svg>

あなたはあなたのチャートに適用されているclipPathに変換を同じにしようとして適用する必要があります。