如何在条形图上制作垂直角？ [复制]

Question

有没有一种简单的方法可以在 D3 垂直条形图中的条形顶部放置圆角？我一直在玩 .attr("rx", 3) ，这似乎会影响 Bar 的所有四个角。

Answer 1

您无法指定要在 SVG 中圆化哪些角：rx 将影响所有 4 个角。

唯一的解决方案是使用路径来模拟矩形。此函数返回一个顶角为圆形的路径：

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";
};

这是一个演示 sn-p，显示了带有这些路径的“条形图”，半径（此处为 rx 等效项）为 5px：

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";
};

var data = [40, 50, 30, 40, 90, 54, 20, 35, 60, 42];

var svg = d3.select("body")
	.append("svg")
	.attr("width", 400)
	.attr("height", 120);
	
var rects = svg.selectAll(".paths").data(data).enter().append("path");
rects.attr("d", function(d,i){ return rectangle(10+40*i,100-d,20,d,5)});

var texts = svg.selectAll(".text").data("ABCDEFGHIJ".split("")).enter().append("text").attr("y",114).attr("x", function(d,i){return 16+40*i}).text(function(d){return d});

path {
  fill:teal;
}

text {
  fill:darkslategray;
  font-size: 12px;
}

<script src="https://d3js.org/d3.v4.min.js"></script>

PS：这个函数不是我写的，它是基于 M. Bostock 和 R. Longson 的 these answers。