tickformatを使用してプロットした軸のティックからのテキストの書式設定

Question

tickformatを使用してxaxisとyaxisのティックにフォーマットを追加することはできますか？

考え方は次のように軸の長い名前をカットされています https://github.com/d3/d3-format/blob/master/README.md

をフォーマットにありますplotly APIリファレンス

axiswithaverylongname --> axisw... 

と例が https://plot.ly/javascript/reference/#layout-xaxis-tickformat

を遡り、また、彼らは、D3のマニュアルを参照してください。

プロット参照番号：

tickformat (string) 
default: "" 
Sets the tick label formatting rule using d3 formatting mini-languages 
which are very similar to those in Python. For numbers, see: 
https://github.com/d3/d3-format/blob/master/README.md#locale_format 
And for dates see: https://github.com/d3/d3-time- 
format/blob/master/README.md#locale_format We add one item to d3's 
date formatter: "%{n}f" for fractional seconds with n digits. For 
example, "2016-10-13 09:15:23.456" with tickformat "%H~%M~%S.%2f" 
would display "09~15~23.46" 

Answer 1

私が知る限り、tickformat経由で直接行う方法はありませんが、数行のJavaScriptコードで解決できます。

Plotly.d3.selectAll(".xtick text").each(function(d, i) { 
    Plotly.d3.select(this).html(Plotly.d3.select(this).html().substr(0, 5)); 
}); 

使用D3のseleectAll濡れx軸上のすべてのtextのラベルを取得し、最初のラベルの最初の5つの文字でテキストを更新します。

以下の例では、自動的に実行するか、ボタンを押したときに実行できます。

var trace1 = { 
 
    x: ["A", "B1", "axiswithaverylongname", "Wow, wait a second, that's way tooooo long"], 
 
    y: [1, 2, 3, 4], 
 
    type: "bar" 
 
}; 
 

 
var myPlot = document.getElementById('myPlot') 
 
Plotly.newPlot('myPlot', [trace1]); 
 
document.getElementById("cleanButton").addEventListener("click", function(){ 
 
    Plotly.d3.selectAll(".xtick text").each(function(d, i) { 
 
    if (Plotly.d3.select(this).html().length > 8) { 
 
     Plotly.d3.select(this).html(Plotly.d3.select(this).html().substr(0, 5) + '...'); 
 
    } 
 
    }); 
 
});

<script src="https://cdn.plot.ly/plotly-latest.min.js"></script> 
 
<div id="myPlot" style="width:100%;height:100%"></div> 
 
<button id="cleanButton">Clean x-axis</button>