Fill color in transition
See original GitHub issueHi,
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:
- Created 4 years ago
- Comments:6 (4 by maintainers)
Top 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 >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
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 😃
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.