Никаких подсказок, почему этот Digraph не отображается в моем SVG, не дано. ⇐ Javascript

[Anonymous]

У меня есть следующая функция:

Код: Выделить всё

export async function drawTechTree(techData, svgElement) {
let graphDef = "digraph TechTree {\n";
graphDef += 'node [style="filled", color="black", fontcolor="white", fillcolor="black", fontname="Arial"];\n';

for (const [key, value] of Object.entries(techData)) {
const price = value.price || "Unknown";
const label = `${key}[/b]
Price: ${price}`;
graphDef += `${key} [label= shape="box"];\n`;
}

for (const [key, value] of Object.entries(techData)) {
const appearsAt = value.appearsAt || [];
if (appearsAt.length > 1) {
for (let i = 1; i < appearsAt.length; i++) {
const prereq = appearsAt[i];
if (prereq) {
graphDef += `${prereq} -> ${key};\n`;
}
}
}
}

graphDef += "}";

console.log("Graph definition:", graphDef);

try {
console.log("Rendering graph...");
await new Promise((resolve, reject) => {
d3.select(svgElement)
.graphviz()
.zoom(false)
.renderDot(graphDef)
.on("end", () => {
console.log("Graph rendered successfully");
resolve();
})
.on("error", (err) => {
console.error("Error while rendering the graph:", err);
reject(err);
});
});
} catch (error) {
console.error("An error occurred during graph rendering:", error);
}
}

Я передаю:

Код: Выделить всё

    fetch('./resources/techData.json')
.then((response) => response.json())
.then((techData) => {
drawTechTree(techData, '#techTreeSvg');
})
.catch((error) => console.error('Error loading tech data:', error));

Это дает графу Def идеально сформированную строку DOT, которую я могу отображать в других онлайн-сервисах, которые отображают их в SVG.
Однако вот тут-то все и идет не так.

Код: Выделить всё

.renderDot(graphDef)

- если я отлаживаю это, это не дает никаких подсказок о том, что происходит, но это точно не рендеринг в указанном элементе.
Единственный вывод консоли в эта функция связана с веб-воркерами, и я не думаю, что это повлияет на рендеринг. На самом деле я попытался передать 'digraph {a -> b}', но это тоже не помогло. SVG находится в DOM, имеет правильный идентификатор, и я вижу его на своей веб-странице.
У вас есть какой-нибудь совет, чего не хватает в коде? Спасибо за внимание.
Просто отмечу, что я пробовал с обещанием и без него, который я включил в этот фрагмент. Ни один из .on() не предоставляет ничего полезного, а .on("end"...) никогда не срабатывает.

Подробнее здесь: https://stackoverflow.com/questions/793 ... -in-my-svg