私のグラフィックのラベルにテキストを調整します

Question

私は散布図を持っています。カテゴリの名前を入れて、情報をよく読むことができるようにしたいと思います。しかし、この場合、テキストはsvgのサイズを超え、切り詰められます。

円の位置によってテキストを見栄えよくするにはどうすればよいですか？

 var chartProductos = c3.generate({ 
     bindto: '#chartProductos', 
     data: { 
      xs: { 
       data1: 'data1_x', 
       data2: 'data2_x', 
       data3: 'data3_x', 
       data4: 'data4_x', 
       data5: 'data5_x', 
       data6: 'data6_x', 
       data7: 'data7_x', 
       data8: 'data8_x', 
       data9: 'data9_x', 
       data10: 'data10_x', 
       data11: 'data11_x', 
       data12: 'data12_x', 
       data13: 'data13_x', 
      }, 
      columns: [ 
       ["data1_x", -0.42], 
       ["data2_x", -0.38], 
       ["data3_x", -0.37], 
       ["data4_x", -0.1], 
       ["data5_x", -0.08], 
       ["data6_x", 0.1], 
       ["data7_x", 0.13], 
       ["data8_x", 0.02], 
       ["data9_x", 0.08], 
       ["data10_x", -0.05], 
       ["data11_x", 0.45], 
       ["data12_x", 0.55], 
       ["data13_x", -0.05], 
       ["data1", -0.2], 
       ["data2", -0.3], 
       ["data3", -0.35], 
       ["data4", -0.05], 
       ["data5", 0.25], 
       ["data6", -0.08], 
       ["data7", 0.1], 
       ["data8", 0.15], 
       ["data9", 0.3], 
       ["data10", 0.6], 
       ["data11", -0.4], 
       ["data12", -0.2], 
       ["data13", 0.3] 
      ], 
      type: 'scatter' 
     }, 
     onrendered: function() { fn_NombresPuntos() }, 
     axis: { 
      x: { 
       label: 'PC1', 
       tick: { 
        fit: false, 
        format: d3.format('.2f') 
       } 
      }, 
      y: { 
       label: 'PC2' 
      } 
     }, 
     color: { 
      pattern: ['#1f77b4', '#1f77b4', '#1f77b4', '#1f77b4', '#1f77b4', '#1f77b4', '#1f77b4', '#1f77b4', '#1f77b4', '#1f77b4', '#1f77b4', '#1f77b4', '#d62728'] 
     } 
    }); 

https://jsfiddle.net/yLfv85rf/

Answer 1

あなたは以下のように、この問題を解決するためにSVGテキストのtext-anchor属性を使用することができます。

  var text = d3.select(this.parentNode) 
         .append('text') 
         .attr('dx',parseInt(x)+3) 
         .attr('dy',y) 
         .text(d.id) 
         .attr("class","texto_circulo"); 

      if (text.node().getBoundingClientRect().right > d3.select('#chartProductos').node().getBoundingClientRect().right) { 
      text.attr('dx', parseInt(x)-3); 
      text.attr('text-anchor', 'end'); 
      } 

https://jsfiddle.net/yLfv85rf/1/