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并且应该更改相对顶部，这就是为什么在您的函数中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函数，但它没有被调用。应该调用它来格式化文本。

该调用将调用该函数，第一个参数是所选的 svg 对象，第二个参数是您传递的参数。

因此，对于带有类的标签内的每个文本标签，将使用第一个属性 svg 文本对象和第二个属性 的值来调用tick该函数。wrapx.rangeBand()

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

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

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