susielu / d3-annotation Goto Github PK

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 :)

hi susie,

thanks again for this awesome d3-plugin.

except if i miss something, there is no drag start/end events triggered in editMode.

is it something targeted in a future release ?

thanks in advance
Laurent

Hi, I'd like to thank you first of all for this wonderful plugin. I'm using it a lot now and I think it was very well designed.
I'm currently struggling however with dynamic text wrapping and size in notes. I'm trying to make a chart responsive to the size of it parent. For this I resize and re-position a lot of elements on the window resize event. For my annotations to remain visible I need to change both the wrap length and the font size of the notes.

But the interaction between the wrapping function and the font-size is obscure to me. It seems like it's computing the line height based on the font-size it can find before displaying the annotations (which makes sense). But given that d3.js only allows us to change inline style properties of existing elements, one needs to draw the annotations once to be able to set their font size, before redrawing them with the new wrap length and position.

At least this what I understand at the moment (after several hours trying to figure out a solution, so bear with me if what I wrote doesn't make sense).

Would it be possible to define the font-size in the annotation data instead (in the note, in addition to wrap length) ? This way all dynamic changes are to be made in the annotations' data, and when the annotations are re-draw the note is properly displayed.

General bug report with solution. In Firefox you cannot call .getBBox() on an element with display: none as the css. https://bugzilla.mozilla.org/show_bug.cgi?id=528969

You can get the same visual result without the error if you use visibility: hidden

It looks like this function

Hi, thx for your work. I really like the look and feel of the annotations and want to use them in my projects. I usually work with react with webpack and babel. But this seems to lead to some problems concerning the editable mode.
When I try to drag an element (clicking on a circle) i get the following error message:

drag.js?71be:10 Uncaught TypeError: Cannot read property 'button' of null at SVGCircleElement.defaultFilter (eval at <anonymous> (bundle.js:5531), <anonymous>:16:70) at SVGCircleElement.mousedowned (eval at <anonymous> (bundle.js:5531), <anonymous>:47:32) at SVGCircleElement.eval (eval at <anonymous> (bundle.js:2179), <anonymous>:29:16)

Looking at the file drag.js in d3-drag/src/ I find this:
function defaultFilter() { return !event.button; }

The issue seems to be related to these issues here:

• facebook/react#6641
• d3/d3-zoom#27
• http://stackoverflow.com/questions/37885653/d3-drag-0-3-0-cannot-read-property-button-of-null

But I decided to still write this here because others might run into the same problem.
I have not found a way to get the editable mode running. For now I just configure the annotations by hand in the code. If anyone has an idea how I could get it to work, I'd appreciate it.

Hi Susie! First off, amazing D3 module you built out. This is absolutely great. I just had a quick question about extending the badge or CalloutCircle type to combine the features of both. I'd love to have a circle with text inside that can handle a hover/click/action to pop out additional information. Any info pointing me in the right way would be great! Also sorry if this isn't the appropriate place to ask about annotation questions, first time using Github Issues.

Hi Susie, When I open https://bl.ocks.org/susielu/a464c24d8b42f0c4d9fafe7b48e9e60a on IE11 it shows a blank page. The svg doesn't get formed.

I wanted to use the type d3.annotationCalloutCircle, and the configuration was like below, it partly worked, but the circle the subject described didn't show up, while there was no errors in the console.
And then I tried other type like d3.annotationCalloutRect, also the same.
But when I changed the version to 2.2.0, it workd without changing any other code.
So I guess there is some problem in this version of 2.2.2.

const type = d3.annotationCalloutCircle

const annotations = [{
  note: {
    label: "Longer text to show text wrapping",
    title: "Annotations :)"
  },
  //can use x, y directly instead of data
  //data: { date: "18-Sep-09", close: 185.02 },
  x: 100,
  y: 100,
  dy: 137,
  dx: 162,
  subject: {
    radius: 50,
    radiusPadding: 5
  }
}]

I would like to have annotations that point to multiple subjects.

Would it be easy to add the drag of the note to the texts as well so a user can use the handle as well as the texts to drag the note?
We are integrating your annotations in our mapping tool (Maps4News) and that has the paradigm that you can drag labels and we want to remain consistent

• viewport meta tag for mobile!
• split markdown doc rendering into standalone js blob
• critical css
• fix bug with left menu overlay

I'd really like to be able to get access to the element in a clean way, so that I can add a small chart, or some icons, or other graphics as part of the note.

Hi Susie,

Is there an easy way to add a background color to annotations to make it easier to read when the graph is cluttered? Or would that require appending a rectangle manually behind the annotation text itself? Using the CalloutCircle annotation type at the moment. Thanks.

Cheers,

Yong

How to always place note above the line? I want to set all the notes like the upper one.
Description on the site does not cover this parameter

Hi @susielu! Thank you for creating d3-annotation, it's lovely.

I was curious about the arrowhead/circle options. It looks like the builder runs for every connector that has a marker.

Was wondering if you'd considered SVG's native marker element which knows how to attach itself to the end of a line, and so by default scales itself to the stroke-width and rotates itself to match the line.

Thus, the arrow marker paths would go into a <marker> element in <defs>, and get called using the marker-end attribute.

Sorry if you've already looked and discarded this.

Hi, thanks for the great plugin. Just one question. Does it have any ability to manage alignment like on the pic? The title should be always above but the label should be always under the line.

hi susie,

i just found a bug with the end-connector :

after 1st setup, if i want to change the end-connector dynamically, the new end-connector is displayed but the old one is not removed.

1st setup : annotation.connector.end = 'dot';

....
annotation = makeAnnotations.annotations.collection().annotations[annotation_idx];
annotation.connector.end = 'arrow'
makeAnnotations.annotations.update();

Hi there!

First of all, congratulations for this amazing library! It looks so great.

We're thinking of adding this library as a dependency of proteic.

Since proteic is built on Typescript, we would need the type definitions to add any third-party library.

Any plans for adding such type definitions?

would be nice to have an example of using d3-svg-annotation from npm on top of the default d3v4 bundle that you get when the depedencies from your package.json look like this:

  "dependencies": {
    "d3": "^4.7.1",
    "d3-svg-annotation": "^1.10.0",
    "lodash": "^4.17.4"
  }

First of all thanks for awesome library!

I'm working with Typescript React D3 stack and this library suits very well for my needs but unfortunately even with the example from the documentation TS error is thrown: Argument of type 'Annotation<any>' is not assignable to parameter of type '(selection: Selection<SVGGElement, unknown, HTMLElement, any>, ...args: any[]) => void'

https://codesandbox.io/s/sad-visvesvaraya-e7xqz?file=/src/annotations.ts

Not sure if this is the right place to raise this issue, but it appears that (on mac latest stable Chrome) the demo for @emeeks's Network Annotation with Collision Detection is broken. I raise this here, because that block appears to be part of the docs for this library.

Hi @susielu ,
Thank you for this great d3 plugin. Really love working with it. I encountered a problem when using d3-annotation inside a shadowDOM:

Problem:

My svg element lives inside a shadowDOM. If the element is in editMode it is not possible to drag the annotation handles. I have created a codepen to reproduce the problem -> https://codepen.io/anon/pen/GzqvbY?editors=1010

Try to drag the annotation handles and check the console for the error message (Cannot read property 'ownerSVGElement' of null).

Possible solution

I did some debugging and found out that the drag handler is registered on all elements passing this selector g.annotations (see code here):

drag().container(select("g.annotations").node())

This doesn't play nicely with shadowDOM, because the svg element inside the shadowDOM is not visible from outside. A possible solution could be to make the selection relative to the annotation-group:

drag().container(group.selectAll("g.annotations").node())

I wanted to create a PR but failed to implement a working solution. Do you have an idea how we could fix this?

Kind regards,
Manuel

Hi,

First of all: great work ! I had a successful try with the standalone version. I've try to use it with rollup (I'm a complet newbie with rollup so there is a high probability that the issue is on my side). I get a "Uncaught ReferenceError: d3Dispatch is not defined" in my console.

Here is rollup config file:

import { queue } from "d3-queue";
import { event, select, selectAll } from "d3-selection";
import { scaleLinear, scaleIdentity } from "d3-scale";
import { drag } from "d3-drag";
import { json } from "d3-request";
import { annotation, annotationCalloutCircle } from "d3-svg-annotation";

export {
    queue,
    event,
    select,
    selectAll,
    scaleLinear,
    scaleIdentity,
    drag,
    json,
    annotation,
    annotationCalloutCircle
}

Which it used with a gulp task:

gulp.task('d3-rollup', function() {
    return rollup({
        entry: 'js/custom.d3.js',
        plugins: [
            babel(),
            nodeResolve({ jsnext: true }),
            commonjs(),
            rollup_uglify()
        ]
    }).then(function(bundle) {
        return bundle.write({
            format: 'umd',
            moduleName: 'd3',
            dest: 'js/d3.min.js'
        });
    });
});

I just can't get what is wrong. Do I need to import another property ? Have you an idea ?

I have a dynamically updating graph on a page with annotations. It updates around 2-3 times per second. It's working rather well with the only exception of "wrap" calls which incur a big performance penalty (probably 60% - 80% of the total cost of rendering the annotation).

One way to address that would be to allow the user to disable wrapping. Not ideal - but does the trick when performance is the priority.

In our project we're using d3-annotation and we're currently unable to upgrade to d3 v6 because of this issue: d3/d3-selection#185 (comment)

Are there any plans on upgrading this package to d3 5.x? The current d3 version is 5.9, your docs say 4.x is the target.

Dot and arrow sizes appear to be hardcoded, and not easily customized

Hi, tx for making this great library. It seems fairly straightforward to use, but I am having an issue trying to follow the basic examples where the text.annotation-note-label just renders in the same position as text.annotation-note-title (rather than below it on the y-axis as show in the example).

Here is the full code:

https://observablehq.com/@kortina/wall-st-vs-main-st

And relevant snippet:

const annotations = [
    {
    note: { title: "2008 Financial Crisis", label: "Unemploymentꜛ  S&P500 ꜜ" },
    x: x(new Date(2008, 4)), 
    y: yLeft(0.09),
    dy: 100,
    dx: -150
  },
  {
    note: { title: "COVID-19" },
    x: x(new Date(2020, 2)), 
    y: yLeft(0.07),
    dy: 50,
    dx: -150
  }
]

const makeAnnotations = d3.annotation()
  .editMode(false)
  .notePadding(0)
  .type(d3.annotationCalloutCircle)
  .annotations(annotations)
  
  svg
  .append("g")
  .attr("class", "annotation-group")
  .attr("clip-path", clipId) // uncomment to animate annotation
  .call(makeAnnotations)
  

}

Am I doing something silly here? Or do I need to add some extra custom css to get the label to offset by the correct y amount to render below the title?

Hi Susie, thank you for this awesome d3 plugin.
I was wondering if there's a way to update the position of the connector end when the editMode is enabled. As far as I can see it is possible to change the connector end position only for the connectors which type is d3.annotationCalloutCircle. Am I right or I am missing something?

If there is no such functionality could you please guide me in such a way that I can try to add it myself and then make a pull request?
Thanks

When including this library file directly, it comes with it's own version of d3 modules, duplicating the code when d3 lib is already on the page

Hi Susie, thank you for this awesome d3 module! I was wondering if there's a way to style the annotation text so certain words have different colors?

I'd like to color the words "Democrat" and "Republican" blue and red respectively. Also, is it possible to justify the text within the annotation?

If you are only supporting Chrome and Firefox, they implement the CSS font loading API. You can wrap all of your code in a fonts ready function:

document.fonts.ready.then(function(){
  //write annotation code here
})

Otherwise I recommend using Web Font Loader. I tried a simple example that worked the broken test case in Safari.

Added webfont script to the page

<script src="https://ajax.googleapis.com/ajax/libs/webfont/1.6.26/webfont.js"></script>

then used their API to load the font and run code on the active event listener

WebFont.load({
  google: {
     families: ['Lato:300,900'],
  },
  active: function () {
    //write annotation code here
  }
})

Not sure if I am not understanding the code properly or made my own mistake, but when I try to add a custom orientation into the note it has no effect. Basically what I want to do is have an annotation with a connector that is angled down and text above the horizontal line. Looking at the repo I see line 1480 of d3-annotation.js:

if (lineType === "vertical") orientation = "leftRight";else if (lineType === "horizontal") orientation = "topBottom";

It seems to me that custom orientation could be getting ignored because of lineType. Please correct me if I'm wrong!

Error: Object doesn't support property or method 'draw'

7511401#diff-01ef6ddcd6013061bb6b63e7cf0bbf8fL3328

When I revert the line above to the previous version (without the !d.type.name ternary expression) it works.

First of all nice plugin!
I am having a issue with the positioning of the annotations. The problem seems to be that if dy is placed underneath y, then additional padding is added to to the label. Please see image below.

I am assuming this has something to do with the line height property?

Hi,
I have a problem with dynamically changing annotation type. I tring change annotation type when I click on note.

var makeAnnotation= d3.annotation().annotations(annotations0).type(d3.annotationCallout).on('noteclick', onClick)

function onClick(annotation)
{
annotation.color = "#000000"; - it works
annotation.type = d3.annotationLabel; - it doesn't work
makeAnnotation.update();
}

I can change type for all items from annotations0, but I need change a single annotation type.
It works:
makeAnnotation.type(d3.annotationLabel)
d3.select("#groupId0").select("g.annotation-group").call(makeAnnotation)

How can I change a single annotation type?

Thanks.

These kinds of brackets are useful for denoting periods.

I am trying to have a separate annotator for each visualization.

Currently, the edit mode is enabled globally. It would be nice if this can be modular. :)

It looks like notePadding() is missing in the Typescript type definition.

annotation.notePadding() Change the overall notePadding, otherwise in the annotation object array you can change each individual one with the {note: {padding: 30}} property

I created a pull request to add the type here:

#54

This is not the same rendering between the thumbnail and the demo blocks.

The thumbnail from http://d3-annotation.susielu.com/#examples

The render from https://bl.ocks.org/susielu/a464c24d8b42f0c4d9fafe7b48e9e60a

I also don't achieve to display the line in version 2.0.0 from npm.

Searching for possibility to responsive scale SVG with its annotations. I would like to see any approach to do it

The path extending the connector above/beside the note is not given a stroke style in d3-annotation v2. I am running Chomium within electron, and it is not rendered.

There is no stroke style applied to the appropriate element.

This can be rectified for now by manually applying the style after drawing the annotations, as such (pardon my coffeescript)

  el.call makeAnnotations

  d3.selectAll 'g.annotations g.annotation'
    .each (d)->
      d3.select @
        .select '.note-line'
          .attr 'stroke', d.color

Expected output:

Thanks for the amazing library!

I'd like a simple way to place a label on the connector, both as text-on-a-path and just floating in the middle (or at some appropriate point with the more convoluted connectors).

IE doesn't support Object.assign: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/assign#Browser_compatibility

What do you think of using something like _.assign?

Is it possible to pair this up with transitions? I've had no luck and it appears all of the examples that reposition smoothly rely on updates from drag or tick.

I'm still havin a lot of fun using your annotations. I just found this little bug (the title says it all). Not big deal but it might be hard to spot for users.

This is not a issue, but a question on how to use d3-svg-annotation with node.js require()
In my server.js file, I have
require('d3-svg-annotation');

When I tried this command:
d3-svg-annotation().annotations()

I get an error:
d3-svg-annotation().annotations()
ReferenceError: svg is not defined

This may be basic question, but I could not find how d3-svg-annotation can be used when we render on the server using node.

Any clue will be very helpful

Thank you