d3 직사각형 대신 svg 경로를 사용하는 사용자 정의 막대 차트 막대

Question

d3 막 대형 차트를 만들려고 노력하고 있지만 부적절한 디자이너로 인해 각 막대의 왼쪽 상단과 오른쪽에 둥근 모서리가 필요합니다. 나는 어딘가로 가고 있다고 생각하지만, 라인을 넘기 위해 약간의 도움을 사용할 수 있습니다.

d3과 svg에 대해 학습하는 오르막 곡선에서 여전히 많은 부분이 있으므로, 나는 분명히 아무것도 놓치지 않았 으면 좋겠다.

나는 rect (주석 처리 된 부분)를 사용하여이 작업을 성공적으로 수행했으나 경로를 그리는 방법에 결함이있을 수 있습니다. topRoundedRect 함수에 인수로 전달하는 익명 함수 (예 : function (datum, index) {return x (index);})는 경로의 d 속성에 추가되기 전에 평가되지 않고 있습니다. 이유를 이해하십시오. 그래서 나는 다음과 같은 오류를 그만 둘 : 당신이 제공 할 수있는

Error: Problem parsing d="Mfunction (datum, index) { return x(index); }3,function (datum) { return height - y(datum); }h34a3,3 0 0 1 3,3vNaNh-40vNaNa3,3 0 0 1 3,-3z"

어떤 조언이 환상적 일 것입니다. 아래 코드.

var data = [60.45,60.45,89.54,120.34,106.45,127.43]; 

var barWidth = 40; 
var width = (barWidth + 10) * data.length; 
var height = 500; 


var x = d3.scale.linear().domain([0, data.length]).range([0, width]); 
var y = d3.scale.linear().domain([0, d3.max(data, function(datum) { return datum; })]). 
    rangeRound([0, height]); 

// add the canvas to the DOM 
var barDemo = d3.select("body"). 
    append("svg"). 
    attr("width", width). 
    attr("height", height); 


function topRoundedRect(x, y, width, height, radius) { 
    return "M" + (x + radius) + "," + y 
     + "h" + (width - (radius * 2)) 
     + "a" + radius + "," + radius + " 0 0 1 " + radius + "," + radius 
     + "v" + (height - radius) 
     + "h" + (0-width) 
     + "v" + (0-(height-radius)) 
     + "a" + radius + "," + radius + " 0 0 1 " + radius + "," + -radius 
     + "z"; 
} 

    /* 
barDemo.selectAll("rect"). 
    data(data). 
    enter(). 
    append("svg:rect"). 
    attr("x", function(datum, index) { return x(index); }). 
    attr("y", function(datum) { return height - y(datum); }). 
    attr("height", function(datum) { return y(datum); }). 
    attr("width", barWidth). 
    attr("fill", "url(#barGradient)"); */ 


    barDemo.selectAll("path"). 
    data(data). 
    enter().append("path"). 
     attr("d", topRoundedRect(
      function(datum, index) { return x(index); }, 
      function(datum) { return height - y(datum); }, 
      barWidth, 
      function(datum) { return y(datum); }, 
      3)) 
     .style("fill","#ffcc00") 
     .style("stroke","none");  

Answer 1

속성의 인수는 데이터와 색인을 매개 변수로 사용하는 함수 여야합니다. 시도 :

attr("d", function(datum, index) { 
    return topRoundedRect( x(index), 
           height - y(datum), 
           barWidth, 
           y(datum), 
           3); 
})