[Feature Request] Add custom label anchor for Sankey graphs
オープン
まだ誰も着手していません。
feature
P3
- 主要言語
- JavaScript
- スター
- 18.3k
- フォーク
- 2k
- 平均マージ
- 2日 12時間
- マージ済み PR(30日)
- 28
説明
Add the possibility to custom change the anchor of the node text
Current:
After:
Minimum example code:
import dash
from dash import dcc, html, Input, Output
import plotly.graph_objects as go
# Inicializa o app Dash
app = dash.Dash(__name__)
app.title = "Sankey Colorido"
# ----------- Sankey básico -------------
labels = ["A1", "A2", "B1", "B2", "C1", "C2"]
sources = [0, 1, 0, 2, 3, 3]
targets = [2, 3, 3, 4, 4, 5]
values = [8, 4, 2, 8, 4, 2]
fig = go.Figure(go.Sankey(
arrangement="snap",
node=dict(
pad=15,
thickness=20,
line=dict(color="black", width=0.5),
label=labels,
color="blue"
),
link=dict(
source=sources,
target=targets,
value=values
)
))
fig.update_layout(title_text="Basic Sankey Diagram", font_size=10)
# ----------- Layout Dash -------------
app.layout = html.Div([
dcc.Graph(
id="sankey-graph",
figure=fig,
style={"width":"100%", "height":"100vh"}
)
])
# ----------- Client-side callback para alinhar labels -------------
# desloca horizontalmente e alinha à direita
app.clientside_callback(
"""
function(figure) {
setTimeout(() => {
const labels = document.querySelectorAll('.sankey .node-label');
labels.forEach(label => {
const transform = label.getAttribute('transform');
const match = /translate\\(([^,]+),([^)]+)\\)/.exec(transform);
if(match){
const y = parseFloat(match[2]);
const x = -15; // deslocamento horizontal
label.setAttribute('transform', `translate(${x},${y})`);
label.setAttribute('text-anchor','end'); // alinhamento à direita
}
});
}, 500); // espera renderização
return figure;
}
""",
Output('sankey-graph', 'figure'),
Input('sankey-graph', 'figure')
)
if __name__ == "__main__":
app.run(debug=True)
The clientside_callback is replaced after user interaction with the graph
コントリビューションガイド
はじめの一歩
- issue を最後まで読み、次にプロジェクトのコントリビューションガイドを読みます。
- 着手することを issue にコメントします — 二人が同じ作業をするのを防げます。
- リポジトリをフォークし、ブランチを切って変更します。
- issue 番号を参照したプルリクエストを送ります。
調査の方向性
issue ではリポジトリのファイルもテストも指定されていません。まず plotly.js における Sankey ノードラベルの描画を追跡し、clientside callback の workaround と比較してください。対応済みのカスタムラベルアンカーが、その workaround なしでグラフ操作後も維持されれば完了です。
索引モデルが issue の本文から書いたものです。
評価
- 技術スタック
- javascript
- 領域
- data-visualization
- issue の種類
- 機能追加
- 難易度
- 4/5
- 見積もり時間
- 3〜5日
- 活発さ
- 停滞
- 明瞭さ
- おおむね明確
- 初心者へのやさしさ
- 42/100