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/

调整我图形标签中的文字

1 个答案: