how can I modify the width of the texts in the legend?
Question
I have a chart that is made in c3.js. and I'm trying to change the text of the categories with d3.js. These texts in my real example are dynamic texts that come from a web service. 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]);
})
1 answers
solution1
0 2018-02-07 23:15:02
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 :
<!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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.