устранить граничный радиус в промежутке между прямоугольниками

Как мне настроить бары, чтобы иметь border-radius в моей диаграмме, как в снимок ниже?устранить граничный радиус в промежутке между прямоугольниками

enter image description here

Вот что я пробовал:

Я выбрал все rect и сделал,

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

Но did not give desired effect.
Я ссылался на пример here.

Как исправить это?

jsFiddle

источник

2014-02-18 Rahul Desai

Я не знаю d3.js, но в SVG, чтобы нарисовать прямоугольник только с двумя закругленными углами, вам нужно определить путь, вы не можете использовать 'rect'. –

Возможный дубликат этого вопроса http://stackoverflow.com/questions/12115691/svg-d3-js-rounded-corner-on-one-corner-of-a-rectangle – Ruskin

Это [** 'link' **] (http://bl.ocks.org/mbostock/3468167), конечно, поможет вам в этом. –

<rect> SVG элемент не позволяет округлить только некоторые конкретные углы. Вы должны использовать элемент SVG <path>. Вы можете использовать функции, заданные в 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); });

Вот fork вашего jsFiddle округление прямоугольники, как в вашем снимке.

источник

2014-07-02 06:35:51

устранить граничный радиус в промежутке между прямоугольниками

ответ

Смежные вопросы