1

could you please direct me on how to draw in D3.js rounded corners (just for the first and for the last element) within the stacked bar chart.

Currently generated SVG code for one instance/one row of stacked bar is as follows:

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

Above I've added:

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

to all rect elements which is not even close to my requirement. The question is how to add corners just to boundary elements (first and last)?

ELing
  • 249
  • 6
  • 19
  • 1
    What do you mean by 'boundary elements'? Is that the rects? Show us your code because .attr("rx", "15") works for me. When you say that it is 'not even close to your requirements' what are you getting and what are you expecting? – Shane G Aug 25 '17 at 10:25
  • @ofey OP is talking about a stacked bar chart. `rx` and `ry` will round the corner of each individual rectangle. OP wants to round the top corners of the top rectangle and the bottom corners of the lower rectangle only. – Gerardo Furtado Aug 25 '17 at 11:12
  • @ELing what you want can be done manipulating paths, similar to what I did [in this answer](https://stackoverflow.com/a/39844755/5768908). Unfortunately this will take a lot of work, and I doubt anyone here is willing to write that for you. Anyway, I hope someone else helps you. – Gerardo Furtado Aug 25 '17 at 11:19
  • @GerardoFurtado OK I see. Deleted my useless answer so. – Shane G Aug 25 '17 at 11:44

1 Answers1

2

While that is not a programatic implementation, the grafic result you are aiming for could be this:

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

Each rect belonging to the same stack gets the same clip-path, and the clipPath rect with the rounded corners reaches from the lower to the upper bound of the complete stack.

ccprog
  • 20,308
  • 4
  • 27
  • 44