magjac/d3-graphviz

transition weird behavior with graphviz(selector) ( instead of d3.select(selector).graphviz() )

kasra0 opened this issue · 3 comments

kasra0 commented

Hi,

I have this code :

import * as d3             from 'd3'
import {graphviz}          from "d3-graphviz"

function demo2(selector){   

    const graph  =  graphviz(selector);             // OK : but transition is not working
    //const graph = d3.select(selector).graphviz()// KO : d3__WEBPACK_IMPORTED_MODULE_0__.select(...).graphviz is not a function
    const g1         =  `digraph  {a -> b}`;
    const g2         =  `digraph  {a -> b -> c}`;
    const dots       =  [g1,g2]
    const next       =  (index)=>(index + 1) % dots.length
    const render     =  (index)=> graph.renderDot(dots[index]).on("end", render.bind(null,next(index)));
    const transition =  ()=> d3.transition("demo2").ease(d3.easeLinear).delay(500).duration(2000);
    graph.transition(transition).on("initEnd", render.bind(null,0));
    //.logEvents(true).
}

The video link shows the weird result.
Is that a bug or the code is wrong ?

Thanks .

graphviz.transition.error.mp4
magjac commented

I can't say since it's not a complete example that I can run.

I made an example based on your code and it behaves as I expect:

<!DOCTYPE html>
<meta charset="utf-8">
<body>
<script src="../node_modules/d3/dist/d3.js"></script>
<script src="../node_modules/@hpcc-js/wasm/dist/index.min.js"></script>
<script src="../build/d3-graphviz.js"></script>
<div id="graph" style="width: 300px; height: 300px; border: 1px solid black"></div>
<script>

function demo2(selector){   

//    const graph  =  graphviz(selector);             // OK : but transition is not working
    const graph = d3.select(selector).graphviz()// KO : d3__WEBPACK_IMPORTED_MODULE_0__.select(...).graphviz is not a function
    const g1         =  `digraph  {a -> b}`;
    const g2         =  `digraph  {a -> b -> c}`;
    const dots       =  [g1,g2]
    const next       =  (index)=>(index + 1) % dots.length
    const render     =  (index)=> graph.renderDot(dots[index]).on("end", render.bind(null,next(index)));
    const transition =  ()=> d3.transition("demo2").ease(d3.easeLinear).delay(500).duration(2000);
    graph.transition(transition).on("initEnd", render.bind(null,0));
    //.logEvents(true).
}

demo2("#graph");

</script>

https://youtu.be/FOGN6vkWWGQ

kasra0 commented

Here is the repo:

in dst/index.html

you will see

window.onload = function (){
//demo1("#graph1")
demo2("#graph2")
}
You can comment/uncomment to see the behaviors
There are no errors in the console.

the only difference is that :
const graph = d3.select(selector).graphviz(); // (demo1) OK in html
const graph = d3.select(selector).graphviz(); // (demo2) KO in app.js
so i had to use
const graph = graphviz(selector); // (demo2) OK : but transition is not working

thanks for your help

demo1-vs-demo2.mp4
kasra0 commented

It works now,

2022-01-03.17-37-01.mp4

I updated the repo
https://bitbucket.org/kasrashahram/d3-graphviz-webpack-debug.git

At least the demos work outside of the HTML with the use of d3.select(selector).graphviz()
with some basic webpack config.

I have never succeeded in making the transition works properly with the direct use of :

import {graphviz}   from "d3-graphviz"
const graph       = graphviz(selector)

Hope it helps.

Thanks

  • 👍1