javascript - 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);
      }
    }
  });

谢谢。

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 的标签内的每个文本标签，将使用第一个属性 svg 文本对象和第二个 x.rangeBand 的值调用 wrap 函数()。

您的 wrap 函数通过将字符串吐出到单词列表中来复制文本对象中的字符串，然后通过 text.text(null) 清空文本标签内容。

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

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