如何在 d3.js 中使顶部边缘单独弯曲

Question

我正在尝试将右上角和左上角设为曲线我尝试使用 ry 但它制作了 4 条边曲线。

Answer 1

对于圆条，将 <rect> 替换为 <path>，并将路径的 d 属性设置为 topRoundedRectPath:

返回的路径

const topRoundedRectPath = (x, y, width, height, radius) => {
  return `M ${x},${y + height} V ${y + radius} 
    Q ${x},${y}, ${x + radius},${y} H ${x + width - radius} 
    Q ${x + width},${y} ${x + width},${y + radius} V ${y + height} Z`
}


const rectX = 10;
const rectY = 10;
const rectW = 30;
const rectH = 100;
const cornerRadius = 12;

d3.select('#first')
  .append('rect')
  .attr('x', rectX)
  .attr('y', rectY)
  .attr('width', rectW)
  .attr('height', rectH);

d3.select('#second')
  .append('path')
  .attr('d', topRoundedRectPath(rectX, rectY, rectW, rectH, cornerRadius));

svg {
  width: 100px; 
  height: 120px;
}

rect, path {
  fill: blue;
  stroke: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>

<svg id="first">
</svg>

<svg id="second">
</svg>

如何在 d3.js 中使顶部边缘单独弯曲

How to make top edges alone curve in d3.js

d3.js

angularjs