棒グラフの垂直コーナーの作成方法は？

Question

D3垂直棒グラフの棒の真上に丸い角を配置する簡単な方法はありますか？私は.attr（ "rx"、3）で遊んでいましたが、これはBarの4つのコーナーすべてに影響するようです。

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

は5pxの半径（ここで同等rx）と、それらのパスで「棒グラフ」を示すデモの断片である：

function rectangle(x, y, width, height, radius){ 
 
\t 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") 
 
\t .append("svg") 
 
\t .attr("width", 400) 
 
\t .attr("height", 120); 
 
\t 
 
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.ボストックとR. Longsonによってthese answersに基づいていた、その機能を書いていません。