Ищете способ отображения меток на диаграмме солнечных лучей (не могу найти рабочий пример)

Question

Благодаря чьей-то помощи (Брэндон) я смог добавить всплывающие подсказки к диаграммам солнечных лучей. Я все еще ищу способ отобразить метку пути на диаграмме солнечных лучей (а затем всплывающую подсказку двойного режима + текст).

Пример, который я хотел бы улучшить, представлен на jsfiddle.net/trakkasure/UPqX5/

Я ищу код для добавления в следующий раздел кода:

path = svg.data([getData()]).selectAll("path") 
    .data(partition.nodes)
    .enter().append("svg:path")  
    .attr("d", arc)  
    .style("fill", function(d) { return color((d.children ? d : d.parent).name); })  
    .on("click", magnify)  
    .on("mouseover", function(d) {  
    tooltip.show([d3.event.clientX,d3.event.clientY],'<div>'+d.name+'</div>  <div>'+d.value+'</div>')
    })  
    .on('mouseout',function(){  
    tooltip.cleanup()
    })              
    .each(stash);

И я хотел бы видеть метки, как показано в примере, предоставленном на http://bl.ocks.org/910126. Я не могу заставить этот пример работать на меня (я все еще новичок в D3)

Я понимаю, что на этом графике может быть слишком много текста, но в моем сценарии это не проблема.

Может кто-нибудь помочь мне понять, как отобразить все эти метки на графике?

Answer 1

Просто добавьте элементы svg:text на холст:

path.append("svg:text")
  .attr("transform", function(d) { return "rotate(" + (d.x + d.dx / 2 - Math.PI / 2) / Math.PI * 180 + ")"; })
  .attr("x", function(d) { return d.y; })
  .attr("dx", "6") // margin
  .attr("dy", ".35em") // vertical-align
  .text(function(d) { return d.name; });

Однако, в моем редакторе, это сломает ваш magnify функция, поэтому я создаю группу SVG, чтобы держать вместе каждую пару пути и текста. На мой взгляд, элементы лучше организованы таким образом, что их легче запрашивать в будущем.

Обратите внимание, что вам нужно изменить magnify Функция также анимирует текст, так как на данный момент она только анимирует путь и оставляет текст в исходном положении.

group = svg.data([getData()]).selectAll("path")
  .data(partition.nodes)
  .enter().append('svg:g');

//path variable is required by magnify function
path = group.append("svg:path")
  .attr("d", arc)
  .style("fill", function(d) { return color((d.children ? d : d.parent).name); })
  .on("click", magnify)
  .on("mouseover", function(d) {
    tooltip.show([d3.event.clientX,d3.event.clientY],'<div>'+d.name+'</div><div>'+d.value+'</div>')
  })
  .on('mouseout',function(){
    tooltip.cleanup()
  }) 
  .each(stash);

// you may need to assign the result to a variable, 
// for example to animate the text in your magnify function, 
// as shown in the path variable above
group.append("svg:text")
  .attr("transform", function(d) { return "rotate(" + (d.x + d.dx / 2 - Math.PI / 2) / Math.PI * 180 + ")"; })
  .attr("x", function(d) { return d.y; })
  .attr("dx", "6") // margin
  .attr("dy", ".35em") // vertical-align
  .text(function(d) { return d.name; });

Код был взят из вашего приведенного примера, однако я отредактировал x приписать в .attr("x", function(d) { return d.y; }) правильно расположить текст на основе вашей структуры данных (в примере используется Math.sqrt(d.y)). Я также изменяю text функция для возврата d.name

вот jsFiddle