我如何包装长文本标签与D3.js

How can I wrap long text labels with D3.js?

本文关键字：文本标签 D3 js 包装 何包装      更新时间：2023-09-26

我使用D3创建了一个node-tree，并想了解如何包装太长的文本。

  nodeUpdate.select("text")
      .text(function(d) {
        if(d.name == "root"){
            return "";
        } else {
            return d.name;
        }
       })
      .style("font-family", "Verdana")
      .style("fill-opacity", 1);

如果d.name太长，我希望它填满几行而不是一行。我找到了这个http://bl.ocks.org/mbostock/7555321，但我似乎不明白这是如何工作的，我当然不明白"包装"函数是如何得到它的输入的?在这个例子中，调用wrap函数时没有参数。

来自http://bl.ocks.org/mbostock/7555321的代码有两个关键部分:

调用wrap() done

svg.append("g")
  .attr("class", "x axis")
  .attr("transform", "translate(0," + height + ")")
  .call(xAxis)
.selectAll(".tick text")
  .call(wrap, x.rangeBand());

需要一个文本元素和一个宽度，就像

一样
node.append("text")
  // Make sure to have a text element
  .text(function(d) {
    return d.name;
  })
  .call(wrap, 50);

这里令人困惑的部分是调用语句适用于当前选择，如.tick text或所有节点。

第二部分是必需的text.text()，否则它不起作用。

function wrap(text, width) {
  text.each(function() {
  var text = d3.select(this),
      words = text.text().split(/'s+/).reverse(),
相关文章：