Comments (4)
I went to a talk ages about by Terence Eden from NHSX where he was talking about the various possibilities around JS in SVGs. This particular use case was at the back of my mind and it felt like it should be possible to wire up one of two options:
- Preprocess labels to generate some key stats about them (eg lines, line breaks, width) and then supply that as an API that the client side can call to make decisions about rendering
- Try to come up with some rules about rendering, and make the client evaluate them in order to work out the final layout
Neither really felt good, but the fact that the JS to do them could be embedded in the SVG felt like some really nice containerisation, especially as you have the option to dynamically generate that JS on the server side.
Of course, that might also be WAY too complex for what we're doing here, and may well not play nice with existing tech, but I saw this fly past and I figured I'd stick my oar in!
from visualisation-tool.
Thanks @robredpath - that's very interesting! I wonder how well drawing tools like draw.io or inkscape deal with embedded JS.
Either way, I think we're planning to try moving away from SVG first (#8), but it's good to know we might have other options.
from visualisation-tool.
This issue is resolved if we use labels exclusively for visualising the node (i.e. the icon and the text are part of the label). The node itself can become a transparent container for the label that will resize dynamically when rendered and control the intersection point for the edge. We can control this intersection point if necessary but I've found the built in shapes and intersection points to be pretty robust.
The decision then is between SVG labels and HTML labels.
HTML provides much better handling of text (positioning, centering, wrapping, etc).
SVG maintains the convention and allows downloads etc.
As discussed in #8 we might be able to leverage the benefits of both depending on the use case, or utilise HTML alone for greater text control.
from visualisation-tool.
I'm pretty happy to close this and just say that using HTML solves our problems. In the interest of directness, I'll do that now and let anyone who disagrees re-open it :)
from visualisation-tool.
Related Issues (20)
- Add borders and backgrounds to the flag elements HOT 7
- Display unknown interestLevel (directOrIndirect) as dotted line HOT 3
- Add white background to edge labels HOT 1
- Unknown properties of interests should be well represented HOT 10
- Property name update: incorporatedInJurisdiction -> jurisdiction
- Represent PLCs based only on publicListing.hasPublicListing HOT 2
- Visualising unknown persons: adopt the Cytoscape/Register approach HOT 2
- Ampersands in text don't present correctly HOT 4
- If possible, make `.label` selector used in line 230 of index.js less generic as it can find elements outside of the bods visualizer DOM nodes. HOT 4
- Allow user to choose Directionality HOT 1
- Use the official BOVS icons HOT 9
- Implement line weight representing interest strength HOT 13
- Name displayed for people should be "individual" type by default HOT 1
- Minimal set of BODS features & properties required for a diagram to be rendered HOT 6
- Resolve SVG flags issues HOT 4
- Add new stateBody icon and associated code
- Ensure that arrowheads are complete HOT 1
- SVG downloads exactly as on screen, not necessarily full diagram HOT 6
- Interest types - owns/controls mapping missing HOT 5
- Increase spacing of dashes for indirect relationship edges
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.
from visualisation-tool.