d3-area-label
d3-area-label copied to clipboard
curran
Support Vertical Areas
Indeed, that would be a cool feature! Any ideas on how it could be implemented?
I tried to wrap using MBosstock wrapper function but not succeeded, here is the example where i used your d3 area label and MBosstock wrapper function https://jsfiddle.net/vishal_29/8zk9jqcg/
Could you please clarify where this "MBosstock wrapper function" came from?
I think it can work. The label position function will need to know how many lines there are, and will need to know the bounding box of all the lines combined.
Hey I got it working. It works if you apply the wrap function before positioning the labels. Here's a working jsFiddle https://jsfiddle.net/8zk9jqcg/1/
Currently, it can position a single thing within an area, based on the bounding box of that thing. That single thing can contain multiple things, for example it could be an SVG <g> element with anything inside it.
From the image, I'm not sure what is really going on. But it seems there are multiple labels inside each stream, and those labels are each positioned individually. This is not something that D3-AreaLabel can do (yet).
https://jsfiddle.net/vkchouksey/axor08ph/8/
Here, words getting overlap with other layers
Yeah, this happens when there's a low number of data points. It's because of the curvyness of d3.curveBasis. This is what it looks like if you switch it to d3.curveLinear:
The label placement algorithm does linear interpolation, so effectively it treats the curve as though it's using d3.curveLinear, even thought it may not be. I haven't figured out a way to use the actual curve - I would love to change it to use the real curve, but I'm not sure how.
HI Curran,
Little stucked labelling is not working this time, I am attaching image of chrome debugging console screen and code on codepen.
https://codepen.io/vchouksey/project/editor/XwKbMe
I got vertical areas working in sort of a hacky way here, with word wrapping https://bl.ocks.org/curran/c567efde3b3da7bc1f642627072aabfc
