D3 x轴长标签重叠

D3 X-Axis long label overlapping

本文关键字：标签 重叠 D3      更新时间：2023-09-26

我有一个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);
      }
    }
  });

谢谢。

而不是仅仅设置位置甚至宽度必须设置，但没有办法你可以设置宽度像svg文本标签中的html标签，而你可以简单地添加多个tspan和相对顶部应该改变，这就是为什么在你的功能dy的tspan被设置为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函数，但它不是bean调用。应该调用它来格式化文本。

调用将使用第一个参数(选择的svg对象)和第二个参数(传递的参数)调用函数。

因此，对于具有tick类的标签中的每个文本标签，wrap函数将首先使用svg文本对象属性调用，然后使用x.rangeBand()的值调用。

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

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

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

相关文章：