Es gibt keine Hinweise darauf, warum dieser Digraph in meinem SVG nicht gerendert wird ⇐ JavaScript

[Guest]

Ich habe die folgende Funktion:

Code: Select all

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);
}
}

Ich übergebe:

Code: Select all

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

Dadurch verfügt graphDef über einen perfekt geformten DOT-String, den ich in anderen Online-Diensten rendern kann, die diese in SVGs rendern.
Allerdings Da geht alles schief.

Code: Select all

.renderDot(graphDef)

– Wenn ich das debugge, gibt es keine Hinweise darauf, was passiert, aber es wird sicher nicht im angegebenen Element gerendert.
Die einzige Konsolenausgabe in Diese Funktion bezieht sich auf Web-Worker und ich glaube nicht, dass dies Auswirkungen auf das Rendering hat. Tatsächlich habe ich versucht, 'digraph {a -> b}' zu übergeben, aber das hat auch nicht gerendert. Das SVG befindet sich im DOM und hat die richtige ID und ich kann es auf meiner Webseite sehen.
Haben Sie also einen Rat für mich, fehlt etwas im Code? Danke fürs Lesen.
Nur um zu erwähnen, dass ich es mit und ohne das Promise versucht habe, das ich in diesem Snippet eingefügt habe. Keines der .on()-Elemente bietet etwas Nützliches und das .on("end"...)-Element wird nie ausgelöst.