Improvement request: Ability to change the colour of following elements inside the

I was thinking of something like: <div class="snippet-clipboard-content notranslat

Colour change inside a flow chart? about flowchart.js HOT 5 CLOSED

adrai commented on May 18, 2024

Colour change inside a flow chart?

from flowchart.js.

Comments (5)

adrai commented on May 18, 2024

You can try to do this via jquery...
Flowchart.js has no idea what is past and future...

from flowchart.js.

Stwissel commented on May 18, 2024

I was thinking of something like:

      st->op1(color:#FF0000 background-color:#00FF00)->cond

or (better):

     op1=>operation(color:#FF0000 background-color:#00FF00): My Operation

from flowchart.js.

adrai commented on May 18, 2024

I would really recommend to use jquery for that... there shouldn't be too much "styling infos"

$('#op1').attr('fill', '#00FF00');

$('#op1').attr('stroke', '#FF0000');

from flowchart.js.

Stwissel commented on May 18, 2024

I was thinking of something like:

      st->op1(color:#FF0000 background-color:#00FF00)->cond

or (better):

     op1=>operation(color:#FF0000 background-color:#00FF00): My Operation

from flowchart.js.

Stwissel commented on May 18, 2024

The jQuery makes sense, sorry that I didn't think about it.
I was musing adding a "color change" item to operation, condition, io, start, stop...
This way I could derive the change point from data without contemplating about how to implement. Something like:

     st=>start: Start:>http://www.google.com[blank]
     e=>end:>http://www.google.com
     op1=>operation: My Operation
     sub1=>subroutine: My Subroutine
     cond=>condition: Yes or No?:>http://www.google.com
     io=>inputoutput: catch something...
     curr=>color: foreground:#FF0000 background:#FFDDDD
     future=>color: foreground: #333399 background:#CCCCFF
     deadend=>color: foreground:#CCCCCC background:#888888

     st->op1->cond
     cond(yes)->curr->io-future->e
     cond(no)->deadend->sub1(right)->op1

Or...

    io(class=future)=>operation
    cond(class=current)=>condition
    op3(class=deadend)=>operation

You then would only need to generate the class attribute and let the CSS handle the rest.
Eventually even skip the class= and only write op3(deadend)

But I will go with the jquery for now.

from flowchart.js.

Related Issues (20)

Recommend Projects

React

A declarative, efficient, and flexible JavaScript library for building user interfaces.

Vue.js

🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

Typescript

TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

TensorFlow

An Open Source Machine Learning Framework for Everyone

Django

The Web framework for perfectionists with deadlines.

Laravel

A PHP framework for web artisans

D3

Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

javascript

JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

web

Some thing interesting about web. New door for the world.

server

A server is a program made to process requests and deliver data to clients.

Machine learning

Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

Visualization

Some thing interesting about visualization, use data art

Game

Some thing interesting about game, make everyone happy.

Recommend Org

Facebook

We are working to build community through open source technology. NB: members must have two-factor auth.

Microsoft

Open source projects and samples from Microsoft.

Google

Google ❤️ Open Source for everyone.

Alibaba

Alibaba Open Source for everyone

D3

Data-Driven Documents codes.

Tencent

China tencent open source team.