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 - 带圆角的堆积条形图

回答

相关问题