d3 라인에서 굽힘 생성 방법

Question

d3 라인에서 굽힘을 만드는 방법은 무엇입니까? (참조 : http://jsfiddle.net/sxg6e4wj/)

나는 날카로운 모서리와 라인을 구축했지만, 가장자리에 굴곡을 만드는 방법을 완전히 확실하지 않다.

var lineData = [ { "x": 20, "y": 20}, { "x": 20, "y": 40}, 
       { "x": 0, "y": 40}, { "x": 0, "y": 60} ]; 

var lineFunction = d3.svg.line() 
.x(function(d) { return d.x; }) 
.y(function(d) { return d.y; }) 
.interpolate("linear"); 

d3.select('body') 
    .append("svg") 
    .attr("width", 500) 
    .attr("height", 500) 
    .append('path') 
    .style('fill', 'none') 
    .style('stroke', 'blue') 
    .style('stroke-width', 5) 
    .attr('d', lineFunction(lineData)); 

Answer 1

stroke-linejoin 스타일을 사용하면 둥근 선 결합을 얻을 수 있습니다.

d3.select('body') 
    .append("svg") 
    .attr("width", 500) 
    .attr("height", 500) 
    .append('path') 
    .style('fill', 'none') 
    .style('stroke', 'blue') 
    .style('stroke-width', 5) 
    .style("stroke-linejoin","round") 
    .attr('d', lineFunction(lineData)); 

큰 커브를 만들려면 경로의 각 세그먼트 뒤에 커브를 추가해야합니다. 여기 내 프로젝트 중 하나에 사용했던 샘플 코드 JSFiddle이 있습니다. 코드는 주로 pathSegList 및 createSVGPathSegCurvetoQuadraticAbs 메소드를 기반으로합니다. 희망이 도움이됩니다.

Answer 2

당신이 달성하려는 작업에 따라, 그냥 basis 등 다른 interpolate 기능을 사용하기에 충분 될 수 있습니다.

var lineFunction = d3.svg.line() 
.x(function(d) { return d.x; }) 
.y(function(d) { return d.y; }) 
.interpolate("basis"); 

라인에 대한 더 많은 옵션을 보려면 여기를 참조하십시오 : 그것은 충분하지 있다면 Lines & Paths

, 당신은 SVG 경로 (see here)로 볼 수 있으며, here로, 베지에 같은 사용자 정의 생성기를 작성합니다.

도움이 되었기를 바랍니다.