Как изменить положение элемента svg круга с помощью атрибута transform?

Question

В настоящее время я создаю диаграмму солнечных лучей в D3JS и пытаюсь добавить круги к каждому узлу. Вы можете посмотреть текущий проект здесь: https://jsfiddle.net/mhxuo260/.

Я пытаюсь расположить каждый из кругов в правом верхнем углу их соответствующего узла. В настоящее время они будут располагаться только в центре, который охватывает метки узлов. Я искал сеть в поисках подсказки, но пока ничего не придумал. Любое предложение будет оценено по достоинству.

d3.json("flare.json", function(error, root) { 
if (error) throw error; 

var g = svg.selectAll("g") 
    .data(partition.nodes(root)) 
    .enter().append("g"); 

path = g.append("path") 
    .attr("d", arc) 
    .attr('stroke', 'white') 
    .attr("fill", function(d) { return color((d.children ? d : d.parent).name); }) 
    .on("click", magnify) 
    .each(stash); 

var text = g.append("text") 
    // .attr("x", function(d) { return d.x; }) 
    // .attr("dx", "6") // margin 
    // .attr("dy", ".35em") // vertical-align 
    .text(function(d) { 
     return d.name; 
    }) 
    .attr('font-size', function(d) { 
     return '10px'; 
    }) 
    .attr("text-anchor", "middle") 
    .attr("transform", function(d) { 
     if (d.depth > 0) { 
      return "translate(" + arc.centroid(d) + ")" + 
        "rotate(" + getStartAngle(d) + ")"; 
     } else { 
      return null; 
     } 
    }) 
    .on("click", magnify); 

var circle = g.append('circle') 
    .attr('cx', function(d) { return d.x }) 
    .attr('cy', function(d) { return d.dy; }) 
    .attr('r', '10') 
    .attr('fill', 'white') 
    .attr('stroke', 'lightblue') 
    .attr("transform", function(d) { 
     console.log(arc.centroid(d)) 
     if (d.depth > 0) { 
      return "translate(" + arc.centroid(d) + ")" + 
        "rotate(" + getStartAngle(d) + ")"; 
     } else { 
      return null; 
     } 
    }); 

Answer 1

Вы используете функцию'''arc.centroid''', которая всегда возвращает й, у средней точки дуги. Все, что функция делает это:

The midpoint is defined as (startAngle + endAngle)/2 and (innerRadius + outerRadius)/2 

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

.attr("transform", function(d) { 
     var x = (startAngle + endAngle)/2; 
     var y = (innerRadius + outerRadius)/2; 

     return "translate(" + x +"," + y + ")"; 
    }); 

Вам не нужно вращать круг.

(FYI: javascript преобразует массивы в строки путем объединения каждого числа с запятыми, вот почему arc.centroid возвращает массив работает здесь)