0

I am trying to visualise a GV file with D3-Graphviz library. I have called the GV file directly in my code:

<script src="https://unpkg.com/@hpcc-js/wasm@0.3.11/dist/index.min.js"></script>
<script src="https://unpkg.com/d3-graphviz@3.0.5/build/d3-graphviz.js"></script>
<div id="graph" style="text-align: center;"></div>

<script>

let dots = new FileReader();
dots.readAsText('G.gv')
let dotIndex = 0;
let graphviz = d3.select("#graph").graphviz()
    .transition(function () {
        return d3.transition("main")
            .ease(d3.easeLinear)
            .delay(500)
            .duration(1500);
    })
    .logEvents(true)
    .on("initEnd", render);

function render() {
    var dotLines = dots[dotIndex];
    var dot = dotLines.join('');
    graphviz
    .addImage("images/Officer.png", "50px", "50px")
    .addImage("images/Manager.png", "50px", "50px")
    .addImage("images/Employee.png", "50px", "50px")
    .addImage("images/Service.png", "50px", "50px")
    .renderDot(dot);
}

My GV file currently looks like this:

digraph G {
    graph [center=true rankdir=LR ratio=compress size="15,10"]
    "MainOfficer" [label="MainOfficer" fontsize=10 image="images/MainOfficer.png" shape=plaintext]
"Employee" [label="MainOfficer" fontsize=10 image="images/Employee.png" shape=plaintext]
"Supporter" [label="MainOfficer" fontsize=10 image="images/Manager.png" shape=plaintext]
}

However, when I opened the HTML file, no graph is shown, and when I checked into the console the error is Failed to execute ReadAsText as parameter 1 is not of type "Blob".

I have tried multiple ways to load the G.gv file into the website (from converting it into text and parse to the Javascript code, to rendering GV file to SVG), however none of my approach worked.

So I would like to ask that is there anyway I could load a GV file to d3-Graphviz, so that my graph could be shown without my need to paste the GV file content directly to the Javascript file?

Thank you!

Hoang Cuong Nguyen
  • 329
  • 2
  • 11
  • 1
    Per the [MDN docs](https://developer.mozilla.org/en-US/docs/Web/API/FileReader): "FileReader can only access the contents of files that the user has explicitly selected, either using an HTML element or by drag and drop. It cannot be used to read a file by pathname from the user's file system. To read files on the client's file system by pathname, use the File System Access API.", though I'd probably prefer to use [Fetch](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API)." Regardless of which you choose, you'll need to use local server, if running locally. – Mark McClure Jan 06 '23 at 13:23
  • @MarkMcClure Thank you for your advice! I have tried to load the G.gv file content by using `let dots = fetch('G.gv').then(response => response.text())` to parse the content of the file as `renderDot(dots)`, however, even though the fetch API could get the file content, I still get an exception: `Uncaught DOMException: Failed to execute 'postMessage' on 'Worker': # could not be cloned.`. So what should I do to parse the G.gv file content as strings for renderDot, in your opinion? – Hoang Cuong Nguyen Jan 09 '23 at 00:24
  • Just another side note for you, I did parse the file as JSON, however this library could not handle JSON so I just want the content of the file being parsed as strings. – Hoang Cuong Nguyen Jan 09 '23 at 03:40

0 Answers0