6

我有一个基于伟大的 d3“咖啡轮”示例的可缩放旭日形图：

在此处输入图像描述

在该示例中，有一个简单的文本换行代码，它在标签中搜索空格并将文本换行在第一个空格字符处：

var textEnter = text.enter().append("text")
  .style("fill-opacity", 1)
  .style("fill", function(d) {
      return brightness(d3.rgb(colour(d))) < 125 ? "#eee" : "#000";
  })
  .attr("text-anchor", function(d) {
      return x(d.x + d.dx / 2) > Math.PI ? "end" : "start";
  })
  .attr("dy", ".2em")
  .attr("transform", function(d) {
      var multiline = (d.name || "").split(" ").length > 1,
      angle = x(d.x + d.dx / 2) * 180 / Math.PI - 90,
      rotate = angle + (multiline ? -.5 : 0);
      return "rotate(" + rotate + ")translate(" + (y(d.y) + padding) +
              ")rotate(" + (angle > 90 ? -180 : 0) + ")";
      })
  .on("click", click);

textEnter.append("tspan")
  .attr("x", 0)
  .text(function(d) {
      return d.depth ? d.name.split(" ")[0] : "";
  });

textEnter.append("tspan")
  .attr("x", 0)
  .attr("dy", "1em")
  .text(function(d) {
      return d.depth ? d.name.split(" ")[1] || "" : "";
  });

此代码工作正常，但它非常基本，特别是如果整个标签将适合可用的 sunbust 段中的一行（或者是因为特定的标签很短，或者由于 sunburst 被缩放，可用空间足够大） . 在密集包装的旭日形中，不必要地包裹标签会导致图表看起来凌乱/杂乱。

  1. 我想让文本处理更加智能，并将标签的长度与可用空间进行比较（注意段的“宽度”根据缩放时可见段的深度而变化）。

  2. 此外，如果标签的可用空间已知，则文本换行可能更智能，例如，如果标签包含两个以上的单词，代码可以决定是在第一个空格还是第二个空格更好。

如果有人已经解决了这个问题并有一些例子，如果可以分享，将不胜感激。或者，如果有人对如何将标签的长度与不断变化的可用空间进行比较有任何想法？

4

0 回答 0