D3.js 如何在条形图上创建垂直角？

在D3垂直条形图中，是否有一种简单的方法将圆角放在条形图的顶部？我一直在使用.attr（“rx”，3），这似乎会影响条的所有四个角。

您无法指定要在SVG中使哪些角变圆：

rx

将影响所有四个角

唯一的解决方案是使用路径模拟矩形。此函数用于返回具有圆角的路径：

function rectangle(x, y, width, height, radius){
    return "M" + (x + radius) + "," + y + "h" + (width - 2*radius) 
    + "a" + radius + "," + radius + " 0 0 1 " + radius + "," + radius + "v" + 
    (height - 2*radius) + "v" + radius + "h" + -radius + "h" + 
    (2*radius - width) + "h" + -radius + "v" + -radius + "v" + 
    (2*radius - height) + "a" + radius + "," + radius + " 0 0 1 " 
    + radius + "," + -radius + "z";
};

下面是一个演示片段，显示了一个带有这些路径的“条形图”，半径（此处的

rx

等效值）为5px：

功能矩形（x、y、宽度、高度、半径）{
返回“M+（x+半径）+”、“y+”h+（宽度-2*半径）+“a+半径+”、“+半径+”0 0 1“+半径+”、“+半径+”v”+（高度-2*半径）+“v”+“半径+”h+“半径+”h+（2*半径-宽度）+“h”-半径+”v”-半径+“v”+（2*半径-高度）+“a”+“半径+”0 1+“半径+”、“-半径+”z”；
};
var数据=[40,50,30,40,90,54,20,35,60,42]；
var svg=d3.选择（“主体”）
.append（“svg”）
.attr（“宽度”，400）
.attr（“高度”，120）；
var rects=svg.selectAll（“.path”）.data（data.enter（）.append（“path”）；
attr（“d”，函数（d，i）{返回矩形（10+40*i，100-d，20，d，5）}）；
var text=svg.selectAll（“.text”）.data（“ABCDEFGHIJ”.split（”）.enter（）.append（“text”）.attr（“y”，114）.attr（“x”，函数（d，i）{return 16+40*i}）.text（函数（d）{return d}）
路径{
填充物：青绿色；
}
正文{
填充：深灰色；
字体大小：12px；
}