question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Fill color in transition

See original GitHub issue

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 😃

Issue Analytics

  • State:closed
  • Created 4 years ago
  • Comments:6 (4 by maintainers)

github_iconTop GitHub Comments

1reaction
Lazare-42commented, Jun 20, 2019

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 😃

1reaction
Lazare-42commented, Jun 19, 2019

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.

Read more comments on GitHub >

github_iconTop Results From Across the Web

transition | CSS-Tricks
Specifying which properties to transition. Notice that we've called out the background-color property in the transition declaration. That tells ...
Read more >
Transition of background-color - css - Stack Overflow
I'm trying to make a transition effect with background-color when hovering menu items, but it does not work. Here is my CSS code:...
Read more >
FillTransition (JavaFX 2.2) - Oracle Help Center
This Transition creates an animation, that changes the filling of a shape over a duration . ... Specifies the start color value for...
Read more >
CSS transition-property color vs. fill - CodePen
Color transitions on SVG paths can be tricky, as browsers behave differently when it comes to transition-property color and fill. Especially when curre......
Read more >
javafx Fill Transition - Javatpoint
It animates the node's fill color so that the fill color can fluctuate between the two color values over the specified duration. In...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found