d3.js를 사용하여 여러 줄을 구현하는 방법은 무엇입니까?

Question

d3.js를 사용하여 multiline을 구현하려고합니다. this example. 이 예제의 함수는 d3에서 일반적인 방식대로 인수를 배열로 가져 오기를 기대하지만 함수로 인수를 전달하기위한 아이디어 만 제공 할 수 있습니다.
배열로 인수를 전달할 수있는 방법을 알고있는 사람이 있습니까? 함수를 인자로 받아들이도록 함수를 변경하는 방법은 무엇입니까?

코드가 배열로이 같은

function centerLinebreak(array){ 
    console.log(array) 
    var string = ""; 
    var maxTextLength = d3.max(array, function(d){ return d.length }) 
    array.forEach(function(t, i){ 
    var l = (maxTextLength - t.length) /2; 
    string += '<tspan class="line'+i+'" '+'y="' +i+ 'em" x="'+l+'em">' + t + '</tspan>' 
    }); 
    return string 
} 

Answer 1

뭔가 다중 문자열 구성 요소를 수신 여러 구성 요소를 반환 할 구성 요소를

arcs.append("svg:text")         
     .attr("transform", function(d) {     

     d.innerRadius = 0; 
     d.outerRadius = r; 
     return "translate(" + arc.centroid(d) + ")";   
    }) 
    .attr("text-anchor", "middle")       
    //.text(function(d, i) { return data[i].label; }); 
    .html(centerLinebreak(function(d, i) { 
     console.log([data[i].label,data[i].perc]) 
     return [data[i].label,data[i].perc]; 
    })); 

코드를 차트로 텍스트를 바인딩 (의 논리를 이동 배열을 centerLinebreak 기능으로)

arcs.append("svg:text")         
     .attr("transform", function(d) {     

     d.innerRadius = 0; 
     d.outerRadius = r; 
     return "translate(" + arc.centroid(d) + ")";   
    }) 
    .attr("text-anchor", "middle")       
    //.text(function(d, i) { return data[i].label; }); 
    .html(centerLinebreak); //call the function like this 

//change the function to accept data and index 
function centerLinebreak(data, i){ 
//make the array 
var array = [data[i].label,data[i].perc]; 

    var string = ""; 
    var maxTextLength = d3.max(array, function(d){ return d.length }) 
    array.forEach(function(t, i){ 
    var l = (maxTextLength - t.length) /2; 
    string += '<tspan class="line'+i+'" '+'y="' +i+ 'em" x="'+l+'em">' + t + '</tspan>' 
    }); 
    return string 
}