D3.js - 帶圓角的堆積條形圖

能否請您指導我如何在堆積的條形圖內繪製D3.js圓角（僅用於第一個和最後一個元素）。D3.js - 帶圓角的堆積條形圖

的一個實例目前生成的SVG代碼/疊置條的一行如下：

<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>

上面我說：

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

所有矩形元素這甚至還沒有接近符合我的要求。問題是如何爲邊界元素（第一個和最後一個）添加拐角？

來源

2017-08-25 ELing

「邊界元素」是什麼意思？這是否是rects？向我們展示您的代碼，因爲.attr（「rx」，「15」）適合我。當你說它「甚至不接近你的要求」時，你會得到什麼，你期望什麼？ –

@ofey OP正在討論堆積條形圖。 'rx'和'ry'將圍繞每個矩形的角落。 OP想要只圍繞頂部矩形的頂角和底部矩形的底角。 –

@ELing你想要的東西可以完成操縱路徑，類似於我在[本答案]（https://stackoverflow.com/a/39844755/5768908）中所做的操作。不幸的是，這需要很多工作，我懷疑這裏有人願意爲你寫這些。無論如何，我希望有人幫助你。 –

雖然這不是一個程序化的實現中，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矩形從整個堆棧的下邊界到上邊界。

來源

2017-08-25 12:50:45 ccprog

D3.js - 帶圓角的堆積條形圖

回答

相關問題