向D3圖形添加換行符y軸標籤

Question

我正在嘗試向我的D3圖形上的y軸標籤添加一個換行符，該圖標顯示移動的帶寬。在它顯示內嵌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]); 
...