森伯斯特图智能文本包装

时间:2013-08-16 14:43:00

标签: svg d3.js label wrapping sunburst-diagram

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

enter image description here

在该示例中,有一个简单的文本换行代码,用于搜索标签中的空格并将文本包装在第一个空格字符处:

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段中安装在一条线上(另外因为特定标签很短或可用空间足够大,因为旭日变焦“ED)。在密集的日光浴中,不必要地包裹标签会导致图表看起来凌乱/混乱。

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

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

  3. 如果有人已经解决了这个问题并且有一些例子,非常感谢它是否可以共享。或者,如果有人对如何将标签的长度与可用空间的变化进行比较有任何想法吗?

0 个答案:

没有答案