How would I create such a view in D3.js -- a central node with self-positioning outer bubbles, all containing text? I'm browsing their gallery but haven't found anything specifically like this. I understand it's good StackOverflow practice to show what one already tried, but I just don't know with which model I'm supposed to start; I played around with a Force Directed Tree with really big radii but it doesn't seem super appropriate.
PS: Icing on the cake would be to have the following connection descriptors as well, but I can also do without. Thanks!
I agree with the suggestion to extend the force-directed graph demo. Here's a quick and dirty fork of that example: https://observablehq.com/#yousefamar/connected-text-bubbles
The text in each bubble is a foreignObject for flexibility, since I found it easier to put a p in the bubbles than svg text. This way you can also use overflow scrolling if there's too much text. pointer-events: none is so that the text can't be selected, and so that you can therefore drag the bubble through the text.
There is probably a lot you can improve there too, e.g. in order to create a gap in the lines, I put a white rect behind the text, but it's an arbitrary width. I remember however that there is some getComputedTextLength function to get the exact width of the label text, which is probably better.
Related
I'm trying to make visualization for iterative algorithm, using macroquad and egui. Pure plot on macroquad looks like this:
Note that each circle or vertice is a struct instance with N fields, content from which I want to appear with hovering over the circle's perimeter?
How can I do it? Which way is more elegant/better to use? I think of writing custom widget for each circle and therefore hovering on this widget. But it seems complicated — I have a lot of circles thus need a lot of widgets. Probably better would be using some fields, where if user clicked, window appeared with information.
Any help is really appreciated
I want to draw text in one of two places depending on whether or not it will fit in the first place. I need the extents to figure that out. My brute force idea is to draw it in the first place with #0000 color, and then check if it fit, and then draw it with the real visible color in that place or the other place. Is there a better way?
At this point you can't. Drawing text is going to be unpredictable with all of the formatting stuff, wrapping, aligning, etc. The only way that Pango provides it is after the fact.
Your solution, as yucky as it is, is the best one I've got.
If there are people know more of Pango who can do this - I would be all ears.
(Full disclosure, I am the Squib dev).
At the risk of asking a silly question, why is each boxplot in d3.box (code and demo) placed in its own svg element? (more generally, placed in its own container element.) Or to put the question another way, why does d3.box only render one component of a chart, rather than all components of a chart? (given that each boxplot is likely to share a common y axis.)
Thanks in advance for any suggestions. I'm sure there's a sensible rationale for this; it's just not clear to me!
Technically, there is no reason to put everything into its own SVG. I don't know why it was done like this in the example, but usually you would have everything in a single SVG and group elements using svg:g elements.
The reason that most d3 components usually only do one thing is that is makes it easier to combine them. If, for example, d3.box rendered x and y axes (or just one of them), you would have to provide options for people who wanted no axes, or a different axis layout, or anything else that isn't covered by how the implementer designed it.
If you're looking for something more high-level that takes care of everything, check out nvd3.js.
What is the best way to prevent overlapping text on coreplot? Especially when some of the slices may be quite small? The overlapping text appears at the bottom, I think that it runs out of space to put it anywhere and thus must pile one label on top of the other.
I could reduce the size of the pie chart, but is there a more elegant way of achieving this?
Mark
Core Plot doesn't do anything about overlapping labels right now. You have to use your knowledge of the data and remove some of the labels that might be too close together.
I'm looking for guidance on implementing a view that renders an NSAttributedString within a polygon with holes, wrapping and reflowing text to fit the geometry. It's not CoreText that's the issue, but the general problem of partitioning an irregular shape into an ordered sequence of squat rectangles.
Similar questions haven't been answered fully:
How to fill a shape with text in Javascript
https://stackoverflow.com/q/3048305
CoreText's CTFramesetter does not support rendering into a CGPath
https://stackoverflow.com/q/3813318
CoreText handles an unbelievable amount of the grunt work associated with text layout and display, so I can't help but suspect that I'm reinventing a wheel. For the purposes of this question, please assume that I can check the substring that fits within a given rectangle, taking into account word wrap and hyphenation.
Edit: I've since decided to just sweep left-to-right drawing as much as fits between boundaries. It looks a bit haphazard even though I'm breaking at natural word boundaries, so I'd still appreciate guidance on how other applications wrap text.
Edit #2: It looks decent now that it supports basic word wrap and avoids rendering very short lines. My question must have been too vague. Thanks for looking.
Edit #3: Amorya points out that CTFramesetter now accepts any CGPath.
I wrote a blog post about achieving text wrap with Core Text:
http://blog.amyworrall.com/post/11098565269/text-wrap-with-core-text
The feature is new in iOS 4.3 and MacOS X Lion. You can now firstly draw inside non-rectangular paths, and secondly pass in other paths to mask the flow (i.e. be the holes you wrap around).