D3.js - 圆角堆积条形图答案

【问题标题】：D3.js - stacked bar chart with rounded cornersD3.js - 圆角堆积条形图
【发布时间】：2018-02-03 08:12:39
【问题描述】：

您能否指导我如何在堆叠条形图中绘制 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)

到所有不符合我要求的矩形元素。问题是如何只为边界元素（第一个和最后一个）添加角？

【问题讨论】：

“边界元素”是什么意思？那是直肠吗？向我们展示您的代码，因为 .attr("rx", "15") 对我有用。当您说它“甚至不符合您的要求”时，您得到了什么，您期望什么？
@ofey OP 正在谈论堆积条形图。 rx 和 ry 将圆角每个单独的矩形。 OP 只想圆顶矩形的顶角和下矩形的底角。
@ELing 你想要的可以通过操纵路径来完成，类似于我所做的in this answer。不幸的是，这需要大量的工作，我怀疑这里的任何人都愿意为你写。无论如何，我希望别人能帮助你。
@GerardoFurtado 好的，我明白了。所以删除了我无用的答案。

标签： javascript d3.js canvas svg html5-canvas

【解决方案1】：

虽然这不是一个程序化的实现，但您的目标可能是这样的：

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

属于同一个栈的每个rect得到相同的clip-path，圆角的clipPath rect从整个栈的下界到上界。

【讨论】：