Fill color in transition

Hi,

First of all I’d like to thank you for the awesome library I have a lot of fun playing around with it 😃

I ran into an issue which I’m not able to solve : how could I set the background color of the graph during a transition between two different dot digraphs ? It always shows up as white.

Here is the code I am currently running :

   function attributer(datum, index, nodes, svg) {
        var selection = d3.select(this);
        if (datum.tag == "svg") {
            var width = 	svg.node().clientWidth;
            var height = 	svg.node().clientHeight;
            var x 		= "10";
            var y 		= "10";
            var unit 	= 'px';
            selection
                .attr("width", width + unit)
                .attr("height", height + unit);
            datum.attributes.width = width + unit;
            datum.attributes.height = height + unit;
        }
        d3.select('#' + "graph0" + ' polygon')
            .attr("fill", "blue")
    }

    function attributer2(datum) {
        d3.select('#' + "graph0" + ' polygon')
            .attr("fill", "blue")
        d3.selectAll()
            .attr("fill", "blue")
            .style("background-color", "blue")
    }

    /**
     *	Dot rendering with D3 
     *	You can choose the graphviz engine to render the Dot
     */
    function render(dotSrc, index, svgNumber, graphviz, svg, currentGraphName) {
        return new Promise((resolve, reject) => {
            var dotTorender = dotSrc[index]

            graphviz
                .engine("dot")
                .attributer(attributer2(svg))
                .transition(transition())
                .attributer(attributer(svg))
                .renderDot(dotTorender)

                .on("end", d    =>   {


                    document.getElementById("graph" + svgNumber).scrollIntoView({ block: 'end',  behavior: 'smooth' })
                    document.getElementById("graph" + svgNumber).style.backgroundColor="blue"
                    svg.select('#' + "graph0" + ' polygon')
                        .attr("fill", "blue")
                            
                    nodes = svg.selectAll('.node,.edge');
                    nodes
                        .on("click", function () {
                            actionFromClick(this, dotSrc, index, svgNumber, graphviz, svg, currentGraphName)
                        })
                    resolve()
                }
                )
        })
    }

This code is obviously a slight modification of your own 😃

[Lazare-42]

Thank you for your answer. I had not realized you could set the digraph colors directly in DOT ! Dot is simply amazing. Thanks again for the library I hope to build amazing dynamic graphs with it 😃

[Lazare-42]

Great ! I’m hyped you’re willing to take a look at my ugly code.

I just made the repo public ; it is located at :

https://github.com/Lazare-42/arara-presentation.git

To run it you just have to run : docker-compose up and the flask will run on port 5000.