在矩形過渡期間消除邊框半徑

Question

如何在我的圖表中設置條形的條紋爲border-radius，如下面的快照中所示？

這裏是我的嘗試：

我選擇了所有rect，做，

.attr("rx", 10) 
    .attr("ry", 10) 

但did not give desired effect。
我已經參考了示例here。

我該如何解決這個問題？

jsFiddle

Answer 1

的<rect> SVG元素不允許只對圓一些特定的角落。您必須使用<path> SVG元素。您可以使用stackmate給出的函數svg/d3.js rounded corner on one corner of a rectangle構建路徑：

x: x-coordinate 
y: y-coordinate 
w: width 
h: height 
r: corner radius 
tl: top_left rounded? 
tr: top_right rounded? 
bl: bottom_left rounded? 
br: bottom_right rounded? 

function rounded_rect(x, y, w, h, r, tl, tr, bl, br) { 
    var retval; 
    retval = "M" + (x + r) + "," + y; 
    retval += "h" + (w - 2*r); 
    if (tr) { retval += "a" + r + "," + r + " 0 0 1 " + r + "," + r; } 
    else { retval += "h" + r; retval += "v" + r; } 
    retval += "v" + (h - 2*r); 
    if (br) { retval += "a" + r + "," + r + " 0 0 1 " + -r + "," + r; } 
    else { retval += "v" + r; retval += "h" + -r; } 
    retval += "h" + (2*r - w); 
    if (bl) { retval += "a" + r + "," + r + " 0 0 1 " + -r + "," + -r; } 
    else { retval += "h" + -r; retval += "v" + -r; } 
    retval += "v" + (2*r - h); 
    if (tl) { retval += "a" + r + "," + r + " 0 0 1 " + r + "," + -r; } 
    else { retval += "v" + -r; retval += "h" + r; } 
    retval += "z"; 
    return retval; 
} 

然後，你必須調用D3.js attr()函數內部此功能。第一個參數是"d"對應於路徑字符串的<path>屬性的名稱，第二個屬性是從數據中生成此字符串的函數。

episode.selectAll("rect") 
    .data(function(d) { return d.ages;}) 
    .enter() 
    .append("path") 
    .attr("d",function(d){ 
       var round; 
       if(d.y0==0){ 
       round=false; 
       }else{ 
       round=true; 
       } 
       return rounded_rect(0, 
            y(d.y1), 
            x.rangeBand(), 
            y(d.y0)-y(d.y1), 
            10,round,round,false,false);}) 
    .style("fill", function(d) { return color(d.name); }); 

這是你的jsfiddle的fork圓矩形作爲您的快照。