javascript - 如何使用 D3.js 包裹长文本标签？

Question

我使用 D3 创建了一个节点树，并且想了解如何换行太长的文本。

  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”函数如何获取它的输入？在此示例中，wrap 函数在调用时没有参数。

Answer 1

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

对wrap()的调用完成

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(),