插入在D3

Question

參照該圖表在文本元素的線斷裂，我想在文本值來插入一個換行對於每個數據點

var labels = svg.selectAll('text') 
    .data(monthlySales) 
    .enter() 
    .append('text') 
    .text(function(d) { 
    return d.stock + "\n " + d.count; 
    }). 

我現在有類似的東西上面。它不會插入任何換行符只是一個空格。

我已經研究過這個問題，並且看到了一些複雜的解決方案。有沒有一種簡單的方法來實現這一點？

Plnkr：http://plnkr.co/edit/B33mAZPMdTRTm6imHxYq?p=info

Answer 1

你可以這樣說：在這裏

//lets create the label 
    var labels = svg.selectAll('text') 
     .data(monthlySales) 
     .enter() 
     .append('text') 
     .append("tspan") 
     .text(function(d) { 
     return d.stock; 
     }).attr({ 
     x: function(d, i) { 
     var ordValue = ordinalValue(d.stock); 
     return xScale(ordValue); 
     }, 
     y: function(d, i) { 
     return yScale(d.count); 
     }, 
     "text-anchor": 'middle', 
     "font-size": 10, 
     "font-family": "sans-serif" 
    }); 
    //lets create the count label 
    svg.selectAll('text').append("tspan") 
     .text(function(d) { 
     return d.count; 
     }).attr({ 
     x: function(d, i) { 
     var ordValue = ordinalValue(d.stock); 
     return xScale(ordValue); 
     }, 
     y: function(d, i) { 
     return yScale(d.count)+ 10;//to show it below the other label 
     }, 
     "text-anchor": 'middle', 
     "font-size": 10, 
     "font-family": "sans-serif" 
    }); 

工作代碼（代碼中的註釋，以幫助）： http://plnkr.co/edit/xDthPgsMfoGTSouVIie8?p=preview