plotly.jsで凡例に固定幅を与える方法

Question

私はplotly.jsを使ってグラフを作成しています。いくつかのチャートは凡例の中に長いテキストを持っているので、これらのテキストは伝説を不要にします。私は伝説の固定幅を与えたいと思うし、テキストの長さが長い場合は、それをラップしたい。

DOMのsvg要素を操作してこれを実行しようとしていますが、伝説はsvg:gタグなので、実際にはあまりできません。私もtextLengthを<text>にしようとしますが、テキストを折り返しますが、改行はしません。

伝説の固定幅を与える方法はありますか？

Answer 1

おそらく凡例のテキストに追加するだけで、固定幅を得るのは簡単な解決策になりますか？ Javascriptで任意のテキストラップトリックを使用することができます。

for (i = 0; i < data.length; i += 1) { 
    data[i].name = data[i].name.replace(/([\w\s,]{13,}?)\s?\b/g, "$1</br>"); 
} 

var numbers = []; 
 
var total = 10000; 
 
var i = 0; 
 
var data = []; 
 

 
for (i = 0; i < total; i++) { 
 
    numbers[i] = ((Math.random() + Math.random() + Math.random() + Math.random() + Math.random() + Math.random()) - 3)/3; 
 
} 
 

 
data.push({ 
 
    x: numbers, 
 
    name: "that's a histogram with lots of points, it therefore needs lots of text as well", 
 
    type: 'histogram', 
 
    marker: {color: 'blue'} 
 
}); 
 

 
numbers = []; 
 
for (var i = 0; i < total; i++) { 
 
    numbers[i] = 0.25 + ((Math.random() + Math.random() + Math.random() + Math.random() + Math.random() + Math.random()) - 3)/3; 
 
} 
 
data.push({ 
 
    x: numbers, 
 
    name: "that's yet another histogram with lots of points, it therefore needs lots of text as well, like for example that it was shifted by 0.25", 
 
    type: 'histogram', 
 
    marker: {color: 'red'} 
 
}); 
 

 
for (i = 0; i < data.length; i += 1) { 
 
    data[i].name = data[i].name.replace(/([\w\s,]{13,}?)\s?\b/g, "$1</br>"); 
 
} 
 

 
Plotly.newPlot('myDiv', data, {showlegend: true});

<script src="https://cdn.plot.ly/plotly-latest.min.js"></script> 
 
<div id="myDiv"></div>