anvaka / anvaka/VivaGraphJS

Internet Explorer - Update node positions using css or attr ?

Open
#170 0 comments 0 reactions 0 assignees View on GitHub
Dominant language
JavaScript
Stars
3.9k
Forks
418
PR merge metrics
No merged PRs in 30d

Description

I am experiencing a **critical** bug for **attaching nodes** atop of links.

This is the bug I have with last version of vivagraph and IE
screen shot 2015-12-25 at 8 19 37 pm

On Safari, FF and Chrome it works fine, but also on internet android it does the same - nodes are not attached to links - nodes' position not updated as soon as they are placed on the graph.

I first wonder if it maybe a library issue:
This is a work I've done using vivagraph 0.6.3, working ok also in IE:
www.xdiscovery.com/en/graph/22

Could you please report if you meet an issue ?
I think it is different than updating matrix transformation, for matrix is not used for nodes svg groups.

The only difference I have in the clogged example and the working one, is that I coded placing nodes making use of `.css` instead of `.attr` (I was experimenting with css transformation to maximize performance).

```
.placeNode(function(nodeUI, pos) {
$('#'+nodeUI.id).css('transform','translate(...)');
})
```

and

```
.placeNode(function(nodeUI, pos) {
$('#'+nodeUI.id).attr('transform','translate(...)');
})
```

Could it be that css transformation is handled differently from IE for an SVG object?
I have still to test if cause it is that, please help in better understanding and learning about SVG and your library:

In both versions I use this way to place links:

```
// graphics for links:
graphics.link(function (link) {
var uiLine = Viva.Graph.svg('line')
// attr for line
return uiLine
}
```

I see in one of your examples you use instead `.placeLink()` function :
_What does `.placeLink()` is needed for VS `graphics.link(f(link){}`?_

-- Might it be an issue in not updating nodes' positions?

In the clogged example I also use **xmlns:svg="http://www.w3.org/2000/svg"** in node UI :
`Pinophyta`
Could it be the problem? when does one need to specify svg type in SVG?
Here I use it to handle and multilines - as you once suggested.
-- Might it be an issue for updating nodes coordinates in SVG groups?

And... What would you advice a simplest way you debug in IE?
I am using remote MS remote desktop to avoid installking a virtual machine but also debugging in IE, well I m not used to and I m not that savvy in SVG specification - I wonder if they may break the code somehow.

Many thanks for debriefing!

Contributor guide

No contributing guide indexed for this repository

Research direction

Start by comparing the two placeNode examples that use CSS transform and attr transform, then inspect the graphics.link and placeLink usage described in the issue. Reproduce the node-positioning problem in Internet Explorer and Android, checking the SVG group, xmlns, and transform behavior; done means nodes remain attached to links across the affected browsers.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript
Domain
frontend
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Needs clarification
Newbie friendliness
20/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.