Добавление разрыва строки на метки оси Y D3

Question

Я пытаюсь добавить разрыв строки к меткам оси Y на моем графике D3, который отображает перемещение полосы пропускания. На данный момент он отображает внутренние 5 GB, я хотел бы, чтобы показать, как это так,

5 
GB 

Таким образом, так как не существует простой способ добавления разрыв строки в SVG элемента текста, я выбрал для выбора всех текстовые элементы после их рендеринга, я разделил их на пространство и разместил их в элементах <tspan> внутри текстового элемента, а GB располагался чуть ниже значения, которое, казалось, работало, за исключением ярлыков, которые не отображаются вообще, даже если они существуют на странице.

Вот фрагмент кода,

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; }) 
       .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 the groups */ 
     groups = svg.selectAll("g") 
     .data(data) 
     .enter() 
     .append("g"); 

     /* add the 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 the 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 the 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 the 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']; 
    } 
} 

В основном я хотел бы добавить разрыв строки в текстовом элементе SVG. Я пробовал несколько методов, но безрезультатно.

Answer 1

Проблема заключается в том, что вы добавляете элементы tspan в виде текста без пространства имен. Таким образом, они интерпретируются как HTML. Если добавить их с помощью D3 или явно создать элементы с пространством имен, он должен работать, т.е.

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