Отображение осей в круге с равным интервалом между

Question

Как видно из this example by Mike Bostock, можно отобразить ось на график по кругу. В связаны, например, есть три оси (с зонами между ними одинакового размера), которое, казалось, созданный этой строки кода

var angle = d3.scale.ordinal().domain(d3.range(4)).rangePoints([0, 2 * Math.PI]), 

плюс

svg.selectAll(".axis") 
    .data(d3.range(3)) 
    .enter().append("line") 
    .attr("class", "axis") 
    .attr("transform", function(d) { return "rotate(" + degrees(angle(d)) + ")"; }) 
    .attr("x1", radius.range()[0]) 
    .attr("x2", radius.range()[1]); 

Игра вокруг с этим примером , я был в состоянии создать график с шестью осями (с равным интервалом между каждой оси), которая охватывает весь круг, используя этот код

var angle = d3.scale.ordinal().domain(["one", "two", "three", "four", "five", "six"]).range([0, 45, 90, 135, 180, 225]) 

, а затем

svg.selectAll(".axis").data(d3.range(7)) 
//code omitted 

Однако, я не был в состоянии создать круг с 9 осями (с равными промежутками между ними), делая это (как я ожидал, что это будет)

var angle = d3.scale.ordinal() 
    .domain(["one", "two", "three", "four", "five", "six", "seven", "eight", "nine"]) 
    .range([0, 45, 90, 135, 180, 225, 270, 315, 360]); 

svg.selectAll(".axis").data(d3.range(10)) 
    //code omitted 

результатом этого является то, что оси начинают вращаться вокруг круга во второй раз.

Вопрос: Есть ли шаблон, который может использоваться для произвольного количества осей, отображаемых в круге с равным интервалом между ними? Если да, пожалуйста, объясните принципы d3 за двумя успешными попытками и одну неудачную попытку, показанную и связанную с выше.

Обновление

Хотя удаление вызовов градусов, ставит ось в правильном положении, (а затем удаление вызова градусов в коде узлов помещают узлы на оси в правых осях), ссылки не выстраиваются правильно, т. е. они не начинаются и не оканчиваются на осях, а плавают без сохранения. Вы можете увидеть проблему в этом образе

Это код ссылки (обратите внимание, что он не имеет вызов градусов)

svg.selectAll(".link") 
    .data(linx) 
    .enter().append("path") 
    .attr("class", "link") 
    .attr("class", function(d) { return "link " + d.Class}) 
    .attr("d", link() 
    .angle(function(d) { return angle(d.X); }) 
    .radius(function(d) { return radius(d.Y); })) 
    .on("mouseover", linkMouseover) 
    .on("mouseout", mouseout); 

Это вызывает функцию связи (который также doens' т есть вызов градусов, так что я не знаю, почему ссылки с началом и концом в старой положение осей), которые я получил от улья реализации Майка Босток в

function link() { 

     var source = function(d) { return d.Source; }, 
     target = function(d) { return d.Target; }, 
     angle = function(d) { return d.angle; }, 
     startRadius = function(d) { return d.radius; }, 
     endRadius = startRadius, 
     arcOffset = -Math.PI/2; 

    function link(d, i) { 
    // console.log(d, i, "interior link func"); 
    var s = node(source, this, d, i), 
     t = node(target, this, d, i), 
     x; 
    if (t.a < s.a) x = t, t = s, s = x; 
    if (t.a - s.a > Math.PI) s.a += 2 * Math.PI; 
    var a1 = s.a + (t.a - s.a)/3, 
     a2 = t.a - (t.a - s.a)/3; 
    return s.r0 - s.r1 || t.r0 - t.r1 
     ? "M" + Math.cos(s.a) * s.r0 + "," + Math.sin(s.a) * s.r0 
     + "L" + Math.cos(s.a) * s.r1 + "," + Math.sin(s.a) * s.r1 
     + "C" + Math.cos(a1) * s.r1 + "," + Math.sin(a1) * s.r1 
     + " " + Math.cos(a2) * t.r1 + "," + Math.sin(a2) * t.r1 
     + " " + Math.cos(t.a) * t.r1 + "," + Math.sin(t.a) * t.r1 
     + "L" + Math.cos(t.a) * t.r0 + "," + Math.sin(t.a) * t.r0 
     + "C" + Math.cos(a2) * t.r0 + "," + Math.sin(a2) * t.r0 
     + " " + Math.cos(a1) * s.r0 + "," + Math.sin(a1) * s.r0 
     + " " + Math.cos(s.a) * s.r0 + "," + Math.sin(s.a) * s.r0 
     : "M" + Math.cos(s.a) * s.r0 + "," + Math.sin(s.a) * s.r0 
     + "C" + Math.cos(a1) * s.r1 + "," + Math.sin(a1) * s.r1 
     + " " + Math.cos(a2) * t.r1 + "," + Math.sin(a2) * t.r1 
     + " " + Math.cos(t.a) * t.r1 + "," + Math.sin(t.a) * t.r1; 
    } 

    function node(method, thiz, d, i) { 
    var node = method.call(thiz, d, i), 
     a = +(typeof angle === "function" ? angle.call(thiz, node, i) : angle) + arcOffset, 
     r0 = +(typeof startRadius === "function" ? startRadius.call(thiz, node, i) : startRadius), 
     r1 = (startRadius === endRadius ? r0 : +(typeof endRadius === "function" ? endRadius.call(thiz, node, i) : endRadius)); 
    return {r0: r0, r1: r1, a: a}; 
    } 

    link.source = function(_) { 
    if (!arguments.length) return source; 
    source = _; 
    return link; 
    }; 

    link.target = function(_) { 
    if (!arguments.length) return target; 
    target = _; 
    return link; 
    }; 

    link.angle = function(_) { 
    if (!arguments.length) return angle; 
    angle = _; 
    return link; 
    }; 

    link.radius = function(_) { 
    if (!arguments.length) return startRadius; 
    startRadius = endRadius = _; 
    return link; 
    }; 

    link.startRadius = function(_) { 
    if (!arguments.length) return startRadius; 
    startRadius = _; 
    return link; 
    }; 

    link.endRadius = function(_) { 
    if (!arguments.length) return endRadius; 
    endRadius = _; 
    return link; 
    }; 

    return link; 
} 

Answer 1

у вас есть углы в градусах ALRE ady, вам не нужно использовать функцию degree(). Если вы удалите вызов, все будет работать нормально.