Adding a line break to D3 graph y-axis labels

Question

I am trying to add a line break to the y-axis labels on my D3 graph, which displays bandwidth moved. At the moment it displays inline `5 GB`, I would like it to display like so, ``` 5 GB ``` So, since there is no easy way of adding a line break to a svg text element, I opted for selecting all of the text elements after they have been rendered, I split them at the space and positioned them in `<tspan>` elements inside of the text element, with the `GB` positioned slightly lower than the value, which seemed to work, except for the labels not displaying at all, even though they did exist on the page. Here is a snippet of the code, ``` function init(svg,data,width,height,margin){ var x = d3.scale.linear() .domain([0,data[0].length-1]) .range([margin.left, width-margin.right]), y = d3.scale.linear() .domain([0,d3.max(data[0])]) .range([height-margin.bottom, margin.top]), /* Define stock x and y axis */ xAxis = d3.svg .axis() .ticks(data[0].length) .tickFormat(function(d) { return d+1; }) .…

Accepted Answer

The problem is that you're adding the `tspan` elements as text without a namespace. This way they get interpreted as HTML. If you add them using D3 or explicitly create the elements with a namespace, it should work, i.e.

```
el.text('');
d3.select(el).append("tspan").text(sections[0]);
...
```

Adding a line break to D3 graph y-axis labels

Solution

Problem