mermaid.jsの円グラフが表示されない
from 2023/08/24
今日が終わるまでに解決するぞ
０時になったので一応終了
2023/8/25
-39 という値がどこから来たのか調査してきたjsconst y = 450
u = E.parentElement.offsetWidth
l = Math.min(u, y) / 2 - 40
T ?? (T = 2);
attr("r", l + T / 2)
function attr(i, v) {
attrConstant)(_, v)
}端折りまくってるから最後のv以外の情報はない(各行は変えてないので１行で検索すれば出てくる)
CSSで
E.parentElement.offsetWidth が0になってしまっているので0 => -40 => -39、というわけ
だからCSSを剝がしてやるときっちり動く
style.cssdiv[id^=dmermaid-preview] {
visibility: inherit;
width: auto;
height: auto;
}なおったよー
2023/8/24のまとめ
まずindex.jsに問題があるのは確定
<circle> 要素の値がおかしいというエラーが発生しているエラーの行にブレイクポイントを置いてステップ実行
mermaid-preview-svg というクラスの要素がページの一番下にできるので非表示にするCSSを剥いで見てみるきちんと表示され、エラーはでない
ここが謎すぎる
ちゃっかりコードブロックの位置に移動しても表示されている
表示されたあとならコードブロックをいじってもエラーでない
再レンダリング(再計算)の条件はコードブロックの編集
2023/8/24
まずindex.jsのどのあたりにmermaidの解析があるのか調べる
function CodeBlock に text:_ と mermaid:be を発見mermaidブロックの時に何か処理するのかと思いきや何も書いてないように見える
わからないので次
mmd_flowchart LR
A --> Ba.mmdpie title Pets adopted by volunteers
"Dogs" : 386
"Cats" : 85
"Rats" : 15
"Birds": 11
pieとかいた瞬間にエラーが発生していた
エラーなのでcssの問題ではない
jsfunction attrConstant(i, v) {
return function() {
this.setAttribute(i, v) //break point
}
}全然わからん...
とりあえず使えそうな情報
jsangerouslySetInnerHTML: {
__html: _
}のhtmlを見てみるとsvgなのはsvgだが貼り付けてみると表示されない
全く分からない！
治った！？
ステップ実行したらちゃんと表示してくれる
一度表示したあとならちゃんと表示される