Question

我使用node-tree创建了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(),

如何用D3.js包装长文本标签？

1 个答案: