javascript - ノードが小さすぎる場合、d3 でテキスト ラベルを非表示にするにはどうすればよいですか?

Question

この例のようなズーム可能なサンバーストを作成しています。問題は、サンバーストに大量のデータがあるため、テキスト ラベルがごちゃごちゃになっていて、ほとんど読めないことです。したがって、このd3.partition.layout の例のように、ラベルが小さすぎる場合は非表示にしたいと思います。この機能を実装するにはどうすればよいですか?

Answer 1

以下を追加することで、これが機能するようになりました。

var kx = width / root.dx, ky = height / 1;

次に、テキスト宣言セクションで次の操作を行います。

var text = g.append("text")
  .attr("transform", function(d) { return "rotate(" + computeTextRotation(d) + ")"; })
  .attr("x", function(d) { return y(d.y); })
  .attr("dx", "6") // margin
  .attr("dy", ".35em") // vertical-align
  .attr("opacity", function(d) { return d.dx * ky > 10 ? 1 : 0; })
  .text(function(d) { return d.name; });

上記の重要な部分は次の行です。

.attr("opacity", function(d) { return d.dx * ky > 10 ? 1 : 0; })

十分な大きさでない場合、これは不透明度を 0 に設定します。次に、クリック関数で同じことを行う必要があります。

function click(d) {
  // fade out all text elements
  text.transition().attr("opacity", 0);

  kx = (d.y ? width - 40 : width) / (1 - d.y);
  ky = height / d.dx;

  path.transition()
    .duration(750)
    .attrTween("d", arcTween(d))
    .each("end", function(e, i) {
    // check if the animated element's data e lies within the visible angle span given in d
    if (e.x >= d.x && e.x < (d.x + d.dx)) {
      // get a selection of the associated text element
      var arcText = d3.select(this.parentNode).select("text");
      // fade in the text element and recalculate positions
      arcText.transition().duration(750)
        .attr("opacity", 1)
        .text(function(d) { return d.name; })
        .attr("opacity", function(d) { return e.dx * ky > 10 ? 1 : 0; })
        .attr("transform", function() { return "rotate(" + computeTextRotation(e) + ")" })
        .attr("x", function(d) { return y(d.y); });
        }
    });
}