寻找一种在森伯斯特图表上显示标签的方法(找不到可行的示例) [英] Looking for a way to display labels on sunburst chart (could not find a working example)

问题描述

由于有人的帮助(布兰登)，我已经能够在朝阳图上添加工具提示. 我仍在寻找在森伯斯特图表上显示路径标签的方法(然后使用双模工具提示+文本).

Thanks to someone's help (Brandon), I've been able to add tooltips to the sunburst charts. I am still looking for a way to display the label of a path on the sunburst chart (and then have the dual mode tooltip + text).

我要改进的示例在jsfiddle.net/trakkasure/UPqX5/

The example that I'd like to improve is provided on jsfiddle.net/trakkasure/UPqX5/

我正在寻找要添加到以下代码部分的代码:

I am looking for the code to add to the following code section:

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还是很陌生)

And I'd like to see the labels as shown on the example is provided on http://bl.ocks.org/910126. I can not get that example to work for me (I'm still new to D3)

我确实知道该图表上可能有太多文本，但是在我的情况下这不是问题.

I do recognize that there might be too much text on that chart, but in my scenario it is not a problem.

有人可以帮助我了解如何在图表上显示所有这些标签吗?

Can someone help me understand how to display all these labels on the chart?

推荐答案

只需将 svg:text 元素附加到画布:

Simply append svg:text elements to the canvas:

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组，将每对路径和文本都组合在一起.我认为，通过这种方式可以更好地组织元素，将来更易于查询.

However, in my edit, this will break your magnify function, so i create an svg group to hold together each pair of path and text. In my opinion, elements are better organized this way, easier to query in the future.

请注意，您需要修改magnify函数以同时为文本设置动画，因为现在它仅为路径设置动画，并将文本保留在其原始位置.

Note that you need to modify your magnify function to also animate the text, as for now it only animate the path and leave the text at their original position.

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

Code was taken from your given example, however I edited the x attribute into .attr("x", function(d) { return d.y; }) to properly position the text based on your data structure (the example uses Math.sqrt(d.y)). I also modify the text function to return d.name

这是 jsFiddle

这篇关于寻找一种在森伯斯特图表上显示标签的方法(找不到可行的示例)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！