D3 X轴长标签重叠问题

Question

我有一个D3条形图，其X轴标签相互重叠。我有以下代码：

// X轴标签换行处理

svg.append("g")
    .attr("class", "x axis")
    .attr("transform", "translate(0," + height + ")")
    .call(xAxis)

我尝试跟随http://bl.ocks.org/mbostock/7555321的步骤，添加所需的函数，但似乎没有成功。有谁能提供建议吗？

function wrap(text, width) {
  text.each(function() {
    var text = d3.select(this),
        words = text.text().split(/\s+/).reverse(),
        word,
        line = [],
        lineNumber = 0,
        lineHeight = 1.1, // ems
        y = text.attr("y"),
        dy = parseFloat(text.attr("dy")),
        tspan = text.text(null).append("tspan").attr("x", 0).attr("y", y).attr("dy", dy + "em");
    while (word = words.pop()) {
      line.push(word);
      tspan.text(line.join(" "));
      if (tspan.node().getComputedTextLength() > width) {
        line.pop();
        tspan.text(line.join(" "));
        line = [word];
        tspan = text.append("tspan").attr("x", 0).attr("y", y).attr("dy", ++lineNumber * lineHeight + dy + "em").text(word);
      }
    }
  });

谢谢。

- kenAu89

---

当您使用该函数时发生了什么？标签是否仍然太长，没有分成单独的行？您的标签是什么样子的？ - Lars Kotthoff

是的，如果您提供完整的调用wrap函数的代码段，我们应该能够帮助您。我最近刚刚成功地应用了它。 - FernOfTheAndes

Answer 1

不仅需要设置位置还需要设置宽度，但在SVG文本标签中没有像HTML标记那样设置宽度的方法，相反，您可以简单地添加多个tspan，并更改相关的顶部，这就是为什么在您的函数tspan的dy设置为lineNumber * lineHeight + dy。

在下面的代码中，.selectAll(".tick text")将选择带有tick类的标签内的所有文本标签。

svg.append("g")
  .attr("class", "x axis")
  .attr("transform", "translate(0," + height + ")")
  .call(xAxis)
.selectAll(".tick text")
  .call(wrap, x.rangeBand());

看看你的代码，你有一个 wrap 函数但它还没有被调用。 它应该在格式化文本时被调用。

调用将使用第一个参数为选择的 svg 对象，第二个参数为传递的参数来调用函数。

因此，对于类名为 tick 的标签内的每个文本标记，wrap 函数将被调用，第一个属性为 svg 文本对象，第二个为 x.rangeBand() 的值。

你的 wrap 函数通过将其拆分成单词列表并通过 text.text(null) 来清空文本标记内容来复制文本对象中的字符串。

一旦 text 对象为空，它会添加一个 tspan 标记，并设置文本以使长度不超过给定的宽度，如果还有更多的单词，则会追加另一个 tspan 并重复直至添加完所有单词。

您可以在 text 标记内找到多个 tspan 标记，每个标记的文本都小于或等于宽度（只需检查元素即可）。

- Mr. A