Wie verbindet ich Zoom (X-Achse) von zwei separaten Handlungsdiagrammen in Stromversorgung? ⇐ Python

[Anonymous]

Ich möchte Audiodaten in Streamlit mit zwei separaten Handlungsdiagrammen visualisieren: eine für die Zeitdomänenwellenform und eine für den MFCC (Melfrequenz-Cepstral-Koeffizienten). Ich möchte ihre X-Achsen verknüpfen, damit das Zoomen oder Schwingen eines Plotes den anderen aktualisiert und sie synchronisiert halten. Falsch.

Code: Select all

trumpet

), um Dateien -Uploads zu vermeiden. Es erzeugt zwei Handlungsdiagramme, aber das Zoomen eines betrifft nicht den anderen. Wie kann ich ihre X-Achsen für Zoom/Pan verknüpfen?

Code: Select all

import streamlit as st
import librosa
import numpy as np
import plotly.graph_objects as go

st.title("Audio Plots")

# Load Librosa example audio
audio, sr = librosa.load(librosa.ex('trumpet'))
duration = len(audio) / sr
time_axis = np.linspace(0, duration, len(audio))

# Compute MFCCs
mfccs = librosa.feature.mfcc(y=audio, sr=sr, n_mfcc=20)
mfcc_time = librosa.frames_to_time(np.arange(mfccs.shape[1]), sr=sr)

# Time Domain plot
fig1 = go.Figure()
fig1.add_trace(go.Scatter(x=time_axis, y=audio, line=dict(color="#4169E1"), name="Time Domain"))
fig1.update_layout(xaxis_title="Time (s)", yaxis_title="Amplitude", title="Time Domain", height=300)
st.plotly_chart(fig1, use_container_width=True)

# MFCC plot
fig2 = go.Figure()
fig2.add_trace(go.Heatmap(z=mfccs, x=mfcc_time, y=np.arange(1, 21), colorscale="Viridis", name="MFCC"))
fig2.update_layout(xaxis_title="Time (s)", yaxis_title="Coefficient", title="MFCC", height=300)
st.plotly_chart(fig2, use_container_width=True)

st.write(f"Duration: {duration:.2f}s, Samples: {len(audio)}, MFCC Frames: {mfccs.shape[1]}")

Was ich ausprobiert habe:

[*] Verwenden von make_subplots (Shared_xaxes = true) , aber ich möchte separate Grundstücke für Layout-Flexibilität. /> < /ul>

Code: Select all

if "x_range" not in st.session_state:
st.session_state.x_range = None
def update_range(change):
if change and "xaxis.range[0]" in change:
st.session_state.x_range = [change["xaxis.range[0]"], change["xaxis.range[1]"]]
st.plotly_chart(fig1, key="time", on_change=update_range)
< /code>
Dies funktioniert manchmal, fällt aber oft aufgrund von Streamlit-Wiederholungen durch. Gibt es eine bessere Möglichkeit, Plotlys relayoutData-ähnliche Ereignisse in Streamlit zu behandeln? streamlit run test_streamlit.py 

Danke eine Million!