不能在d3餅圖上製作多行文本

我遇到了多行文本的問題，並且沒有任何線索，我需要您的幫助，請檢查fiddle。不能在d3餅圖上製作多行文本

我對這個餅圖，空間非常有限，但項目的標題很長，問題是不管是什麼我想我不能打破多，我試圖限制文本的寬度，但它沒有工作，我認爲畫布不接受css屬性？

完整源代碼小提琴

問題代碼在這裏：

var donuts = d3.selectAll("#" + el + ' .donut'); 

donuts.append('text') 
     .attr('class', 'center-txt value') 
     .style('font-size', '16px') 
     .style('fill','rgba(255,255,255,0.8)') 
     .attr('text-anchor', 'middle'); 

donuts.append('text') 
     .append('tspan') 
     .attr('class', 'center-txt type') 
     .attr('y', chart_r * 0.20) 
     .attr('text-anchor', 'middle') 
     .style('font-size', '22px') 
     .style('fill','rgba(255,255,255,0.8)') 
     .text(function(d, i) { 
      return d.type; 
     }); 
donuts.append('text') 
     .append('tspan') 
     .attr('class', 'center-txt percentage') 
     .attr('y', chart_r * 0.20) 
     .attr('text-anchor', 'middle') 
     .style('font-size', '18px') 
     .style('fill','rgba(255,255,255,0.8)') 
     .text('');

}

謝謝

來源

2017-08-28 Haris Sokoli

你爲什麼把「畫布」的稱號和'canvas'標籤？這是一個SVG，而不是畫布。 –

對不起，我的壞，元素的創建方式與我感到困惑，謝謝你的幫助 –

有解決你的問題的不同方法。其中之一是使用邁克·博斯托克的功能wrap，打破你的文字元素。

下面是一個例子的限制設置爲120像素：

thisDonut.select('.percentage') 
    .attr("dy", 0) 
    .text(function(donut_d) { 
     return d.data.cat 
    }).call(wrap, 120);

這裏是更新的小提琴：http://jsfiddle.net/zkLyt5fm/

來源

2017-08-29 01:59:09

不能在d3餅圖上製作多行文本

回答

相關問題