javascript - Adding a line break to D3 graph y-axis labels -

i trying add line break y-axis labels on d3 graph, displays bandwidth moved. @ moment displays inline 5 gb, display so,

5 gb 

so, since there no easy way of adding line break svg text element, opted selecting of text elements after have been rendered, split them @ space , positioned them in <tspan> elements inside of text element, gb positioned lower value, seemed work, except labels not displaying @ all, though did exist on page.

here snippet of 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 , y axis */       xaxis = d3.svg                 .axis()                 .ticks(data[0].length)                 .tickformat(function(d) { return d+1; })                 .scale(x)                 .orient('bottom'),        yaxis = d3.svg                 .axis()                 .scale(y)                 .tickformat(function(d) { return bytestosize(d,0); })                 .orient('right'),        /* line path generator */       line = d3.svg.line().interpolate('monotone')         .x(function(d,i) { return x(i); })         .y(function(d) { return y(d); }),        /* area path generator */       area = d3.svg.area().interpolate('monotone')         .x(line.x())         .y1(line.y())         .y0(y(0)),        /* add groups */       groups = svg.selectall("g")         .data(data)         .enter()         .append("g");        /* add circles */       svg.select("g")         .selectall("circle")       .data(data[0])       .enter()         .append("circle")         .attr("class","dot")         .attr("cx", line.x())         .attr("cy", line.y())         .attr("r", 3.5)         .style("fill","#008cc2")         .style("stroke","#008cc2")         .style("stroke-width","1.5px");          /* add axes */         svg.append('g')                 .attr("class", "x axis")                 .attr("transform", "translate(0,"+(height - 20)+")")                 .call(xaxis)                 .selectall("text")                 .style("text-anchor", "end")                 .attr("dx", "-.3em")                 .attr("dy", "-.3em")                 .attr("transform", function(d) {                     return "rotate(-90)"                 });          svg.append('g')                 .attr("class", "y axis")                 .call(yaxis);        /* add areas */       area = groups.append("path")         .attr("class", "area")         .attr("d",area)         .style("opacity",0.3)         .style("fill", function(d,i) {             return (i == 0 ? "#008cc2" : "#7500c6" );         });        /* add lines */       groups.append("path")         .attr("class", "line")         .attr("d", line)         .style("fill","none")         .style("stroke-width", "1.5px")         .style("stroke", function(d,i) {             return (i == 0 ? "#008cc2" : "#7500c6" );         });      var insertlinebreaks = function (d) {         var el = $(d3.select(this).node());         var sections = bytestosize(d,0);          console.log(sections[0]);         console.log(sections[1]);          el.text('');         el.append('<tspan>'+sections[0]+'</tspan>');         el.append('<tspan x="0" dy="3">'+sections[1]+'</tspan>');      };      svg.selectall('g.y.axis g text').each(insertlinebreaks);      }  function bytestosize(bytes, precision) {     var kilobyte    = 1024;     var megabyte    = kilobyte * 1024;     var gigabyte    = megabyte * 1024;     var terabyte    = gigabyte * 1024;      if ((bytes >= 0) && (bytes < kilobyte)) {         return [bytes,'b'];      }     else if ((bytes >= kilobyte) && (bytes < megabyte))     {         return [(bytes / kilobyte).tofixed(precision),'kb'];      }     else if ((bytes >= megabyte) && (bytes < gigabyte))     {         return [(bytes / megabyte).tofixed(precision),'mb'];      }     else if ((bytes >= gigabyte) && (bytes < terabyte))     {         return [(bytes / gigabyte).tofixed(precision),'gb'];      }     else if (bytes >= terabyte)     {         return [(bytes / terabyte).tofixed(precision),'tb'];      }     else     {         return [bytes,'b'];     } } 

basically add line break svg text element. i've tried few methods, no avail.

the problem you're adding tspan elements text without namespace. way interpreted html. if add them using d3 or explicitly create elements namespace, should work, i.e.

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