d3.js: могу ли я инкапсулировать определения дуги в функции?

Question

Я начинаю с d3.js, у меня есть простой пример, который создает круг из 4 дуг.

Ключевой фрагмент кода генерирует d3 дуги, как так:

var data = [ "#003399", "#0099CC", "#0099FF", "#0000FF"]; 
... 
svg.selectAll("path") 
    .data(data) 
    .enter() 
    .append("path") 
    .attr("d", d3.svg.arc() 
     .innerRadius(rd*3) 
     .outerRadius(rd*4) 
     .startAngle(function(d,i) { return i*ad; }) 
     .endAngle(function(d,i) { return (i+1)*ad; })) 
    .attr("fill", function(d, i) { return d; }) 
    .attr("transform", "translate(" + w/2 +"," + w/2 + ")"); 

complete example является на JSFiddle

Теперь я хотел бы поставить вызов d3.svg.arc() в функция, потому что я хотел бы, чтобы генерировать много больше секций), так это выглядит следующим образом:

var mkarc = function (d, i) { 
    return d3.svg.arc() 
    .innerRadius(rd * 3) 
    .outerRadius(rd * 4) 
    .startAngle(i * ad) 
    .endAngle((i + 1) * ad); 
} 

, а затем атр («d», d3.svg.arc() ...) становится просто атр ("d ", mkarc)

svg.selectAll("path") 
    .data(data) 
    .enter() 
    .append("path") 
    .attr("d", mkarc) 
    .attr("transform", "translate(" + w/2 + "," + w/2 + ")"); 

Но это порождает проблему «Разбор проблемы», устанавливая атрибут. Я видел некоторые из них в stackoverflow и в других местах, но я не смог решить проблему с корнем.

Вот second fiddle с альтернативным подходом, который не работает.

Исправления и некоторые намеки относительно принципов, лежащих в их основе, будут высоко оценены.

Answer 1

Это простая ошибка - прежде чем вы называли функцию, которая возвращает d3.svg.arc(), теперь вы вызываете функцию, которая возвращает функцию d3.svg.arc(). То есть вы возвращаете неоценимую функцию до mkarc. Все, что вам нужно сделать, это применить дуговой генератор вы сделали для d аргумента и все в порядке:

var mkarc = function (d, i) { 
    return d3.svg.arc() 
    .innerRadius(rd * 3) 
    .outerRadius(rd * 4) 
    .startAngle(i * ad) 
    .endAngle((i + 1) * ad)(d); 
} 

Полная демо here.