2

感谢某人的帮助（Brandon），我已经能够向旭日形图添加工具提示。我仍在寻找一种在旭日图上显示路径标签的方法（然后使用双模式工具提示+文本）。

我想改进的示例在 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 的新手）

我确实认识到该图表上可能有太多文本，但在我的情况下这不是问题。

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

4

1 回答 1

2

只需将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

于 2012-11-23T23:27:43.683 回答