D3.js - 丸みのある角を持つ積み上げ棒グラフ

Question

積み上げ棒グラフ内のD3.js丸め角（最初の要素と最後の要素のみ）を描画する方法を教えてください。

次のように1つのインスタンスの

現在生成されたSVGコードは/積み重ね棒グラフの1つの行がある：

<g class="layer" style="fill: rgb(247, 139, 157);"> 
    <rect rx="15" ry="15" y="104" x="51" height="21" width="100"></rect> 
    <rect rx="15" ry="15" y="22" x="78" height="21" width="166"></rect> 
    <rect rx="15" ry="15" y="227" x="48" height="21" width="341"></rect> 
    <rect rx="15" ry="15" y="186" x="80" height="21" width="546"></rect> 
    <rect rx="15" ry="15" y="145" x="80" height="21" width="418"></rect> 
    <rect rx="15" ry="15" y="63" x="40" height="21" width="238"></rect> 
    </g> 

私が追加した上：すべてRECT要素に

.attr("rx", 15) 
    .attr("ry", 15) 

にも近いされていません私の要求に応えます。 問題は境界要素（最初と最後）にコーナーを追加する方法ですか？

Answer 1

それはプログラムによる実装ではありませんが、あなたが目指しているgrafic結果は、この可能性があり：

<svg xmlns="http://www.w3.org/2000/svg" width="450" height="200"> 
 
    <defs> 
 
    <clipPath id="cp1" clipPathUnits="userSpaceOnUse"> 
 
     <rect x="10" y="104" width="141" height="21" rx="8" ry="8" /> 
 
    </clipPath> 
 
    <clipPath id="cp2" clipPathUnits="userSpaceOnUse"> 
 
     <rect x="10" y="22" width="234" height="21" rx="8" ry="8" /> 
 
    </clipPath> 
 
    <clipPath id="cp3" clipPathUnits="userSpaceOnUse"> 
 
     <rect x="10" y="227" width="379" height="21" rx="8" ry="8" /> 
 
    </clipPath> 
 
    <clipPath id="cp4" clipPathUnits="userSpaceOnUse"> 
 
     <rect x="10" y="145" width="170" height="21" rx="8" ry="8" /> 
 
    </clipPath> 
 
    <clipPath id="cp5" clipPathUnits="userSpaceOnUse"> 
 
     <rect x="10" y="63" width="268" height="21" rx="8" ry="8" /> 
 
    </clipPath> 
 
    </defs> 
 
    <g style="fill:#9df78b"> 
 
    <rect clip-path="url(#cp1)" x="10" y="104" width="41" height="21" /> 
 
    <rect clip-path="url(#cp2)" x="10" y="22" width="68" height="21" /> 
 
    <rect clip-path="url(#cp3)" x="10" y="227" width="38" height="21" /> 
 
    <rect clip-path="url(#cp4)" x="10" y="145" width="70" height="21" /> 
 
    <rect clip-path="url(#cp5)" x="10" y="63" width="30" height="21" /> 
 
    </g> 
 
    <g style="fill:#f78b9d"> 
 
    <rect clip-path="url(#cp1)" x="51" y="104" width="100" height="21" /> 
 
    <rect clip-path="url(#cp2)" x="78" y="22" width="166" height="21" /> 
 
    <rect clip-path="url(#cp3)" x="48" y="227" width="341" height="21" /> 
 
    <rect clip-path="url(#cp4)" x="80" y="145" width="100" height="21" /> 
 
    <rect clip-path="url(#cp5)" x="40" y="63" width="238" height="21" /> 
 
    </g> 
 
</svg>

同じスタックに属する各矩形が同じclip-pathを取得し、丸い角を持つclipPath rectは完全なスタックの下限から上限に達する。