带注释的插图的arbor.js

Question

I'm hoping to use arbor.js as a way of creating annotated illustrations.

The plan:

• Fixed size canvas
• Draw image to canvas – as an example i've used the silhouette of head.
• Then have a mixture of fixed and floating nodes.

---

var data = {
               nodes:{
                 brain-position:{},
                 brain-text:{'color':'green','shape':'dot','label':'brain'},
                 mouth-position:{},
mouth-text{'color':'green','shape':'dot','label':'mouth'},
               }, 
               edges:{
                 brain-position:{ brain-text },
mouth-position:{mouth-text}
               }
             };
            sys.graft(data);

The problems i'm having is that when I try to create a statically positioned nodeBox eg. nodeBoxes[node.name] = [50,50, w,w] it breaks the link to other linked nodes.

I'm tinkering with halfvis/src/renderer.js file from the downloaded arbor file.

Many thanks

EDIT

Below is an additional image that hopefully visualises the functionality I'm attempting. Probably should have done this first :)

Answer 1

nodeBoxes , in the halfvis example, is an array used to work out where to start drawing edges so the arrows don't overlap with the boxes - is that what you're using it for?

Are you trying to find a way of forcing the 'brain-position' node inside an area?

Please provide a bit more detail of what you're planning and we can probably do this.