如何修改图例中文字的宽度？

Question

我有一个在c3.js中制作的图表。 并且我正在尝试使用d3.js更改类别的文本。 在我的真实示例中，这些文本是来自Web服务的动态文本。 当我更新文本时，您无法很好地阅读文本，因为文本的宽度仍然是以前的宽度。 如何修改文本的宽度，以使其适应新文本并便于阅读？

var chart = c3.generate({
    data: {
        xs: {
            category1: 'category1_x',
            category2: 'category2_x',
            category3: 'category3_x',
            category4: 'category4_x',
            category5: 'category5_x',
            category6: 'category6_x',
            category7: 'category7_x',
            category8: 'category8_x',

        },
        // iris data from R
        columns: [
            ["category1_x", 3.5],
            ["category2_x", 3.2],
            ["category3_x", 3.2],
            ["category4_x", 3.2],
            ["category5_x", 3.2],
            ["category6_x", 3.2],
            ["category7_x", 3.2],
            ["category8_x", 3.2],

            ["category1", 0.2],
            ["category2", 1.4],
            ["category3", 1.4],
            ["category4", 1.4],
            ["category5", 1.4],
            ["category6", 1.4],
            ["category7", 1.4],
            ["category8", 1.4]

        ],
        type: 'scatter'
    },
    axis: {
        x: {
            label: 'Sepal.Width',
            tick: {
                fit: false
            }
        },
        y: {
            label: 'Petal.Width'
        }
    }
});


 var array=
 ["la categoria 1","es muy diveritda","vamos ","sera que","funciona", "la ","pendejada ","es","ojala si","dsadada"
 ]

d3.selectAll(".c3-legend-item text").each(function(d,i){

      d3.select(this).text(array[i]);

})

https://jsfiddle.net/zvdruskg/

Answer 1

为什么要在绘图后更新文本？ 如果您正确地准备了数据，那么问题就消失了。

如果必须在生成图表后调用它，请使用chart.load ：

 <!DOCTYPE html> <html> <head> <link data-require="c3.js@0.4.11" data-semver="0.4.11" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.11/c3.css" /> <script data-require="c3.js@0.4.11" data-semver="0.4.11" src="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.11/c3.js"></script> <script data-require="d3@3.5.17" data-semver="3.5.17" src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.js"></script> </head> <body> <div id="chart"></div> <script> var chart = c3.generate({ data: { xs: { category1: 'category1_x', category2: 'category2_x', category3: 'category3_x', category4: 'category4_x', category5: 'category5_x', category6: 'category6_x', category7: 'category7_x', category8: 'category8_x', }, // iris data from R columns: [ ["category1_x", 3.5], ["category2_x", 3.2], ["category3_x", 3.2], ["category4_x", 3.2], ["category5_x", 3.2], ["category6_x", 3.2], ["category7_x", 3.2], ["category8_x", 3.2], ["category1", 0.2], ["category2", 1.4], ["category3", 1.4], ["category4", 1.4], ["category5", 1.4], ["category6", 1.4], ["category7", 1.4], ["category8", 1.4] ], type: 'scatter' }, axis: { x: { label: 'Sepal.Width', tick: { fit: false } }, y: { label: 'Petal.Width' } } }); setTimeout(() => { chart.load({ names: { category1: 'la categoria 1', category2: 'es muy diveritda', category3: 'vamos', category4: 'sera que', category5: 'funciona', category6: 'la', category7: 'pendejada', category8: 'es' } }) }, 500); </script> </body> </html>

如何修改图例中文字的宽度？

问题描述

1 个解决方案

解决方案1
0 2018-02-07 23:15:02

如何修改图例中文字的宽度？

问题描述

1 个解决方案

解决方案1 0 2018-02-07 23:15:02

解决方案1
0 2018-02-07 23:15:02