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

Question

I have a chart that is made in c3.js. 我有一个在c3.js中制作的图表。 and I'm trying to change the text of the categories with d3.js. 并且我正在尝试使用d3.js更改类别的文本。 These texts in my real example are dynamic texts that come from a web service. 在我的真实示例中，这些文本是来自Web服务的动态文本。 When I update the texts, you can not read the texts well because the width of the texts is still of the previous ones. 当我更新文本时，您无法很好地阅读文本，因为文本的宽度仍然是以前的宽度。 How can I modify the width of the texts so that they adapt to the new text and facilitate its reading? 如何修改文本的宽度，以使其适应新文本并便于阅读？

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/ https://jsfiddle.net/zvdruskg/

Answer 1

Why are you updating the text after the drawing? 为什么要在绘图后更新文本？ If you properly prepare your data your problem goes away. 如果您正确地准备了数据，那么问题就消失了。

If you must call it after generating your chart use chart.load : 如果必须在生成图表后调用它，请使用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