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的{{1}}函数中设置为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并重复所有单词。

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

D3 X轴长标签重叠

1 个答案: