adjust text in the label of my graphic

Question

I have a scatter plot. I would like to put the names of the categories, so that the information can be read well. But in this case the text exceeds the size of the svg and is cutted.

How can I make texts look good according to location of the circle?

       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

You can use text-anchor attribute of SVG text to solve this problem like below:

            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/