susielu/d3-annotation

public api for custom multiline note

Closed this issue · 3 comments

mipac commented

It would be very useful to choose how the wrapping is done.

For example I found very useful to wrap based on the "\n" I insert in my label.
Using the wrap function:

var wrap = function wrap(text, width) {
        var lineHeight = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 1.2;
        
            text.each(function () {
            var text = d3.select(this),
                words = text.text().split(/\n/).reverse().filter(function (w) {return w !== "";});

            var word,
                tspan = text.text(null);

            while (word = words.pop()) {
                tspan = text.append("tspan")
                    .style("text-anchor", "start")
                    .attr("x", 0)
                    .attr("dy", lineHeight + "em")
                    .text(word);
            }
        });

Perhaps could you expose a way to substitute the "warp" function or a "warp mode" for the existing one and some others like this, and some others...

Thank you for that cool lib :)

susielu commented
susielu commented

This is available in v2.1.0 you can pass a wrapSplitter property to the note configuration for your own split settings. For example:

 { note: {
          label: " A different\n annotation type with long wrap",
          title: "Another title with a long wrap for testing",
          wrapSplitter: /\n/
        }
 }

In this case it would only wrap on the new line in the label. Thanks for this feature suggestion. Let me know if you have any issues with using it.

mipac commented