adrai / adrai/flowchart.js

How to drawSVG in a dom

Offen
#111 3 Kommentare 0 Reaktionen 0 zugewiesene Personen Auf GitHub ansehen
Vorherrschende Sprache
JavaScript
Sterne
8.7k
Forks
1.2k
PR-Merge-Kennzahlen
Keine gemergten PRs in 30 T.

Beschreibung

This plugin is awesome, thanks to contributors.
I want to write a `markdown-it` plugin support for flowchart,
and i need to drawSVG in a dom like this:
`javascript`:
```javascript
var FlowChart = require('flowchart.js');
var diagram = FlowChart.parse(
"st=>start: Start:>http://www.google.com[blank]\n"+
"e=>end:>http://www.google.com\n"+
"op1=>operation: My Operation\n" +
"sub1=>subroutine: My Subroutine\n" +
"cond=>condition: Yes\n" +
"or No?:>http://www.google.com\n" +
"io=>inputoutput: catch something...\n" +
"\n" +
"st->op1->cond\n" +
"cond(yes)->io->e\n" +
"cond(no)->sub1(right)->op1\n"
);
var dom = document.createElement('div');
diagram.drawSVG(dom);
// document.appendChild(dom);
var _dia = document.getElementById('diagram');
_dia.appendChild(dom);
```
`html`:
```html

```
but it cause some problem
1. The size of box not correct:
![image](https://user-images.githubusercontent.com/7724525/28727379-31483b2e-73f7-11e7-8b9d-e7d94d67cbbb.png)
2. The console show me that:
![image](https://user-images.githubusercontent.com/7724525/28727408-457a3282-73f7-11e7-9546-b62765e2ab19.png)

I have no idea how to fix it, help please.
Thanks for your time.
I am a chinease, sorry about for my english.

Beitragsleitfaden

Für dieses Repository ist kein Beitragsleitfaden indexiert

Rechercherichtung

Start by reproducing the provided browser example using FlowChart.parse and diagram.drawSVG(dom), then inspect the two reported symptoms: incorrect box sizing and the console message. Compare the result with the expected diagram in the attached images; done means the SVG renders with correct box dimensions and without the reported console problem.

Vom Indexierungsmodell aus dem Issue-Text verfasst.

Bewertung

Tech-Stack
javascript
Bereich
frontend
Issue-Typ
Bug
Schwierigkeit
3/5
Geschätzter Aufwand
1-2 Tage
Aktivitätsstatus
Veraltet
Klarheit
Größtenteils klar
Anfängerfreundlichkeit
35/100

Neue Issues direkt in Ihr Postfach

Eine kurze Übersicht über anfängerfreundliche GitHub-Issues.