如何修改圖例中文字的寬度？

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