mermaid.jsの円グラフが表示されない
今日が終わるまでに解決するぞ
０時になったので一応終了
2023/8/25
-39という値がどこから来たのか調査してきた
code:js
const 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を剝がしてやるときっちり動く
code:style.css
visibility: inherit;
width: auto;
height: auto;
}
なおったよー
2023/8/24のまとめ
まずindex.jsに問題があるのは確定
<circle>要素の値がおかしいというエラーが発生している
エラーの行にブレイクポイントを置いてステップ実行
mermaid-preview-svgというクラスの要素がページの一番下にできるので非表示にするCSSを剥いで見てみる
きちんと表示され、エラーはでない
ここが謎すぎるwogikaze.icon
ちゃっかりコードブロックの位置に移動しても表示されている
表示されたあとならコードブロックをいじってもエラーでない
再レンダリング(再計算)の条件はコードブロックの編集
2023/8/24
まずindex.jsのどのあたりにmermaidの解析があるのか調べる
function CodeBlockにtext:_とmermaid:beを発見
code:mermaid
ブロックの時に何か処理するのかと思いきや何も書いてないように見える
わからないので次
code:mmd_
flowchart LR
A --> B
code:a.mmd
pie title Pets adopted by volunteers
"Dogs" : 386
"Cats" : 85
"Rats" : 15
"Birds": 11
https://gyazo.com/6e3d0cf3238b13e359226a24be6a9909
pieとかいた瞬間にエラーが発生していた
エラーなのでcssの問題ではない
code:js
function attrConstant(i, v) {
return function() {
this.setAttribute(i, v) //break point
}
}
全然わからん...
とりあえず使えそうな情報
code:js
angerouslySetInnerHTML: {
__html: _
}
のhtmlを見てみるとsvgなのはsvgだが貼り付けてみると表示されない
全く分からない！
治った！？
https://gyazo.com/054cf87ac9f0e85bce746b3a8f116890
ステップ実行したらちゃんと表示してくれる
https://gyazo.com/6c9a590d8f291af312ab837878b7fa2b
一度表示したあとならちゃんと表示される