막 대형 차트에서 수직 모서리를 만드는 방법은 무엇입니까?

Question

D3 수직 막대 차트의 막대 꼭대기에 둥근 모서리를 배치하는 간단한 방법이 있습니까? 나는 .attr ("rx", 3)로 놀아 왔고 그것은 바의 네 모퉁이에 영향을 미치는 것 같습니다.

Answer 1

SVG에서 원하는 모서리를 지정할 수 없습니다. 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>

: 여기

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 상당) 반경 그 경로와 "바 차트"표시 데모 단편이다 :이 함수는 둥근 상부 모서리 경로를 반환

PS : 그 함수를 작성하지 않았다, 그것은 M. Bostock 및 R. Longson에 의해 these answers 기반으로했다.