Question

提供以下小提琴，如何修改它以仅显示内部两个环中的旋转标签？它很简单，可以根据节点的深度显示标签，但在缩放后会中断。我删除了我的修改，它将标签夹在前两个环上，因为它在变焦时会分开，因此小提琴是一个干净的石板。

 var text = g.append("text")
      .attr("transform", function(d) { return "translate(" + arc.centroid(d) + ")rotate(" + computeTextRotation(d) + ")"; })
      .attr('text-anchor', function (d) { return computeTextRotation(d) > 180 ? "end" : "start"; })
      .attr("dx", "6") // margin
      .attr("dy", ".35em") // vertical-align
      .text(function(d) { return d.name; });

fiddle

TIA。

Answer 1

您希望它即使在缩放时也能显示前两个标签吗？

var text = g.append("text")
  .attr("class", "label") //<-- add class to look up later
  .attr("transform", function(d) { return "translate(" + arc.centroid(d) + ")rotate(" + computeTextRotation(d) + ")"; })
  .attr('text-anchor', function (d) { return computeTextRotation(d) > 180 ? "end" : "start"; })
  .attr("dx", "6") // margin
  .attr("dy", ".35em") // vertical-align
  .text(function(d) { return d.name; })
  .style('visibility', function(d) { //<-- set it initially
      return (d.depth === 0 || d.depth === 1) ? 'visible' : 'hidden';   
  });

function click(d) {
  d3.selectAll(".label") //<-- find them all
    .style('visibility', function(d2) {
      return (d2.depth === d.depth || d2.depth === d.depth - 1) ? 'visible' : 'hidden';   //<-- set visibility based on selected node
    });

  ...

评论的编辑

由于缩放显示单击+ 1级别，看起来您需要处理0深度作为特例：

 function isTextVisible(d, depth){
   if (depth === 0){
     return d.depth === 0 || d.depth === 1;
   } else {
     return d.depth === depth || d.depth === depth - 1;
   }
 }

function click(d) {

  d3.selectAll(".label")
    .style('visibility', function(d2) {
      return isTextVisible(d2, d.depth) ? 'visible' : 'hidden';   
    });  

  ...

更新了小提琴here。

如何仅在带有旋转标签的可缩放旭日隔断中显示前两个环中的标签？

1 个答案: