D3 X 轴长标签重叠

Posted 2023-02-22

【中文标题】D3 X 轴长标签重叠

【英文标题】：D3 X-Axis long label overlapping

【发布时间】：2014-04-30 14:57:48

【问题描述】：

我有一个 X 轴标签相互重叠的 D3 条形图。我有以下内容：

// 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);
      
    
  );

谢谢。

【问题讨论】：

您使用该功能时发生了什么？标签是否仍然太长，没有分成单独的行？你的标签是什么样的？

是的，如果您提供调用 wrap 函数的完整部分，我们应该能够为您提供帮助。我最近刚刚成功应用它。

【参考方案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 标签，每个标签的文本都小于或等于宽度（仅检查元素）。