plotlyで2つのグラフを重ねて表示したときにx軸を揃えて表示したい

Question

以下のソースを実行すると、グラフ自体がピッタリ重なって表示され、x軸がy軸方向にちょうどバイアス分の+1だけずれて表示されます。

import plotly
import numpy as np

T= 0.5
N = 2501
x_t = np.linspace(0, T, N)#時間軸

a = np.sin(2*np.pi*10*x_t)
b = a + 1 #バイアスをかける

trace1 = plotly.graph_objs.Scatter(
    x=x_t,
    y=a
    )
trace2 = plotly.graph_objs.Scatter(
    x=x_t,
    y=b,
    yaxis="y2"
)
p_data=[trace1, trace2]
p_layout = plotly.graph_objs.Layout(
    title=memfile,
    xaxis=dict(
        title="time[s]"
    ),
    yaxis=dict(
        title="a",
    ),
    yaxis2=dict(
        title="b",
        overlaying="y",
        side="right"
    ),
)
fig = plotly.graph_objs.Figure(data=p_data, layout=p_layout)
plotly.offline.plot(fig)

実現したいことは以下の2つです。

1. マウスで動かせば、2つのグラフのx軸を揃えられますが、デフォルト状態でx軸を揃えて表示したい。
2. さらに、マウスで拡大縮小などをした際にも、x軸は揃ったままにしたい。

とにかく、どんな操作をしてもx軸は揃ったままに（y=0の点を維持したい;下図のような感じ）したいということです。

わかる方、よろしくお願いします。

Answer 1

x軸(y=0のライン)を揃えたいとのことですが、overlaying='y'のオプションは、もともとそういった使い方を想定してなさそうです。

参考：Plotly.js - How do I make two y-axes associated with a single x-axis? - plotly.js - Plotly Forum

解決策としては、とりあえず、Layoutで範囲指定するというのはどうでしょうか?
上のリンク先でも同様の方法で解決してますが、
以下のような感じで。rangeのオプションで範囲指定ができます。

p_layout = plotly.graph_objs.Layout(
    title="",
    xaxis=dict(
        title="time[s]",
        range=[0, 0.5]
    ),
    yaxis=dict(
        title="a",
        range=[-2, 2]
    ),
    yaxis2=dict(
        title="b",
        overlaying="y",
        side="right",
        range=[-2, 2]
    ),
)

Comments

[murmur1975]

ありがとうございます。
なるほど。実際に使用したい2つのデータは、平均がほとんど0で大きさがかなり異なっていて、それらの波形の時間関係性を見たいです。デフォルト表示でそろえるのでであれば、それぞれのデータの絶対値の大きい方の値を使ってレンジを揃える、というやり方がよさそうですね。ソースを追記しておきます。

Answer 2

yuwki0131さんの助言を受け、こんなふうにしてみました。x軸を常に上下中央に描画します。

import plotly
import numpy as np

T= 0.5
N = 2501
x_t = np.linspace(0, T, N)#時間軸

#最大値と最小値が異なる波形を生成
a = 2*np.sin(2*np.pi*10*x_t) + np.random.normal(0, 0.05, N)
b =   np.cos(2*np.pi*10*x_t) + np.random.normal(0, 0.1,  N) + 0.1

#レンジを取得
range_a = abs(a).max()
range_b = abs(b).max()

trace1 = plotly.graph_objs.Scatter(
    x=x_t,
    y=a
    )
trace2 = plotly.graph_objs.Scatter(
    x=x_t,
    y=b,
    yaxis="y2"
)
p_data=[trace1, trace2]
p_layout = plotly.graph_objs.Layout(
    title="test",
    xaxis=dict(
        title="time[s]",
        range=[0, 0.5]
    ),
    yaxis=dict(
        title="a",
        range=[-range_a, range_a]#レンジを指定
    ),
    yaxis2=dict(
        title="b",
        overlaying="y",
        side="right",
        range=[-range_b, range_b]#レンジを指定
    ),
)
fig = plotly.graph_objs.Figure(data=p_data, layout=p_layout)
plotly.offline.plot(fig)

これで質問1は解決ですね。ありがとうございます。
2の解決法をご存知の方がいらっしゃるかもしれませんので、質問は閉めないでおきます。引き続きよろしくおねがいします。