Как добавить класс/идентификатор для определенного узла

Я использую блок-схему Адраи. И я хочу изменить другой стиль всех узлов. Для макета я использую raphael.js.

Может ли кто-нибудь предложить мне, как я могу достичь этого. Вот мой код

<script> 
         window.onload = function () {
 var diagram = flowchart.parse('st=>start: Start:>http://www.google.com[blank]\n' + 
                                'e=>end:>http://www.google.com\n' + 
                                'op1=>operation: My Operation1\n' + 
                                'sub1=>subroutine: My Subroutine1\n' + 
                                'cond1=>condition: Yes \n' + 
                                'or No 1?\n:>http://www.google.com\n' + 
                                'op2=>operation: My Operation2\n' + 
                                'op3=>operation: My Operation3\n' + 
                                'sub2=>subroutine: My Subroutine2\n' + 
                                'cond2=>condition: Yes \n' + 
                                'or No 2?\n:>http://www.google.com\n' +
                                'io=>inputoutput: catch something...\n' + 
                                '' +
                                'st->op1->cond1\n' + 
                                'cond1(yes, right)->io->e\n' + 
                                'cond1(no)->op2->cond2\n' +
                                'cond2(yes, right)->io->e\n' + // conditions can also be redirected like cond(yes, bottom) or cond(yes, right)
                                'cond2(no)->op2');
  diagram.drawSVG('diagram');

  // you can also try to pass options:

  diagram.drawSVG('diagram', {
                                'line-width': 3,
                                'line-length': 50,
                                'text-margin': 10,
                                'font-size': 14,
                                'font-color': 'black',
                                'line-color': 'black',
                                'element-color': 'black',
                                'fill': 'white',
                                'yes-text': 'yes',
                                'no-text': 'no',
                                'arrow-end': 'block'
                              });
};
</script>

HTML

  <div id="diagram">Diagram will be placed here</div>

Для экс.

Это мой вывод, и мне нужен другой стиль дизайна для всех узлов, таких как начало/условие/операция/конец.

введите здесь описание изображения

Любая помощь будет оценена.


flowchart raphael
person Sumit Raghav    schedule 02.12.2013    source источник
comment
Вы уже добавили код Raphael? Этот график просто дизайн или действительно сгенерирован из вашего javascript?   -  person Paul Lo    schedule 02.12.2013
comment
да, я включил Raphael js. И этот график создается с помощью flowchart.js и raphael.js.   -  person Sumit Raghav    schedule 02.12.2013
comment
Можно ли разместить базовый фрагмент кода на jsfiddle, который выделяет бит, который вы бы не стилизовали?   -  person Ian    schedule 02.12.2013
comment
Я попытался создать jsfiddle. Но код не работал на скрипке, потому что ему нужны внешние файлы js. Кстати, это единственный код, который я объяснил выше. Кроме того, этот код включает только 2 внешних файла js (flowchart.js и raphael.js).   -  person Sumit Raghav    schedule 03.12.2013
comment
Tbh Я не думаю, что вы получите много ответов, если вы не сможете разместить небольшой изолированный рабочий код на jsfiddle, с которым люди могут поиграть.   -  person Ian    schedule 08.12.2013

Ответы (2)


arrow_upward
2
arrow_downward

Может быть немного поздно, но если я сошлюсь на пример, представленный на github (здесь: https://github.com/adrai/flowchart.js/blob/master/example/index.html), вы можете установить стили для различных типов символов, подобных этому (извлечение из примера)

chart.drawSVG('canvas', {
                      'line-width': 3,
                      'line-length': 50,
                      'text-margin': 10,
                      'font-size': 14,
                      'font-color': 'black',
                      'line-color': 'black',
                      'element-color': 'black',
                      'fill': 'white',
                      'yes-text': 'yes',
                      'no-text': 'no',
                      'arrow-end': 'block',
                      'symbols': {
                        'start': {
                          'font-color': 'red',
                          'element-color': 'green',
                          'fill': 'yellow'
                        }
                      }

Здесь символ «старт» заполнен желтым цветом, текст красным и т. д. Я полагаю, вы можете добавить любой стиль к другим символам (стоп, op1 и т. д.).

Более подробное изучение кода (https://github.com/adrai/flowchart.js/commit/8fddc7c8bf2a129f2fe9c4288b70218723d141c2) вы можете увидеть доступные символы:

  • 'Начало',
  • 'конец',
  • 'условие',
  • 'ввод, вывод',
  • 'операция',
  • 'подпрограмма'

Надеюсь это немного поможет

Ваше здоровье

person phron    schedule 19.12.2013

arrow_upward
-1
arrow_downward

Обратите внимание, что это возможно только для типов символов. Это могло бы быть намного более гибким, если бы оно могло предоставлять стили для определенных идентификаторов.

person atardadi    schedule 13.05.2014