D3 - 图表宽度圆边答案

【问题标题】：D3 - Chart width rounded edgesD3 - 图表宽度圆边
【发布时间】：2021-06-24 19:29:23
【问题描述】：

当前值数据较小时图表出现问题，我有一个“耳朵”效应，你能帮我看看这个吗？

这是我正在使用的代码：

const rx = 30;
          const ry = 30;
          svg
            .selectAll(".bar")
            .data(data)
            .enter()
            .append("path")
            .attr("class", "bar")
            .attr("x", function (d) {
              return x(d.key);
            })
            .attr("width", x.bandwidth())
            .attr("y", function (d) {
              return y(d.value);
            })
            .attr("height", function (d) {
              return height - y(d.value);
            })
            .attr("fill", "#206BF3")
            .attr(
              "d",
              (item) => `
        M${x(item.key)},${y(item.value) + ry}
        a${rx},${ry} 0 0 1 ${rx},${-ry}
        h${x.bandwidth() - 2 * rx}
        a${rx},${ry} 0 0 1 ${rx},${ry}
        v${height - y(item.value) - ry}
        h${-x.bandwidth()}Z
      `
            )

我尝试了很多方法，但都有效：|

【问题讨论】：

标签： javascript reactjs d3.js

【解决方案1】：

以下是二次贝塞尔曲线路径的可能解决方案：

const roundedBarPath = (centerX, bottomY, width, height) => {
  const radius = Math.min(width/2, height/2);
  return `
  M ${centerX - width/2}, ${bottomY} 
  V ${bottomY - height + radius}
  Q ${centerX - width/2},${bottomY - height} 
  ${centerX - width/2 + radius},${bottomY - height}
  H ${centerX + width/2 - radius}
  Q ${centerX + width/2},${bottomY - height}
  ${centerX + width/2},${bottomY - height + radius}
  V ${bottomY} Z`;
}

const path1 = roundedBarPath(50,100,30,80);
d3.select('svg')
  .append('path').attr('d', path1).style('fill', 'blue');
  
const path2 = roundedBarPath(100,100,30,20);
d3.select('svg')
  .append('path').attr('d', path2).style('fill', 'blue');  
  
const path3 = roundedBarPath(150,100,30,3);
d3.select('svg')
  .append('path').attr('d', path3).style('fill', 'blue');    
  
const path4 = roundedBarPath(200,100,30,60);
d3.select('svg')
  .append('path').attr('d', path4).style('fill', 'blue');

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<svg width="300" height="150">
</svg>

【讨论】：