I have created a node-tree using D3 and would like to understand how to wrap texts that are too long.

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

If d.name is too long I'd like it to fill several lines instead of one. I have found this but I do not seem to understand how this works, and I certainly don't understand how the "wrap" function gets it's input? On this example the wrap function has no parameters when called.

I have created a node-tree using D3 and would like to understand how to wrap texts that are too long.

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

If d.name is too long I'd like it to fill several lines instead of one. I have found this http://bl.ocks/mbostock/7555321 but I do not seem to understand how this works, and I certainly don't understand how the "wrap" function gets it's input? On this example the wrap function has no parameters when called.

• javascript
• d3.js
• text
• word-wrap

Share Improve this question Follow edited Apr 22, 2019 at 10:30 double-beep 5,5371919 gold badges4040 silver badges4949 bronze badges asked Jul 17, 2014 at 11:40 Sina SohiSina Sohi 2,77999 gold badges3636 silver badges5151 bronze badges 3

• Well just call wrap(d.name, <width>). – Lars Kotthoff Commented Jul 17, 2014 at 12:01
• I tried doing so, but I get an error: "Uncaught TypeError: undefined is not a function", I can only succesfully call it by doing ".call(wrap, [width])", and I've figured out getting the data right. I have received my text in the function now, and in the example they retrieve a "Y" attribute from the text. I don't have such attribute, I only have a dy set for my text. Can you understand why the Y attribute is needed and how it works? – Sina Sohi Commented Jul 17, 2014 at 12:26
• And when attempting to "append("tspan") I get undefined error aswell. I cannot append to it. – Sina Sohi Commented Jul 17, 2014 at 12:37

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 3

The code from http://bl.ocks/mbostock/7555321 has two key parts.

The call to wrap() done

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

which is expecting a text element and a width like done in

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

The confusing part here is that call statements apply to the current selection like .tick text or all nodes.

The second part is the required text.text() otherwise it does not work.

function wrap(text, width) {
  text.each(function() {
  var text = d3.select(this),
      words = text.text().split(/\s+/).reverse(),