Force Directed Falls Apart

[John Bell]

Hello.

I am using d3js to create a force directed graph. When i use this to append the svg to the body of the document, everthing workjs fine.

I wish to have an element called chart that i can style in the part to encapsulate my force directed graph. However, graph only behaves when appended to body.

var width  = 800,
    height = 400;
var svg = d3.select('body')
  .append('svg')
  .attr('width', width)
  .attr('height', height)
  .attr('id', 'mainDesign');
  

Later, i try using a div with id, 'chart'.v <div id='chart'>. And later still, a chart element. <chart></chart>  

However, when i do this, my graph falls apart and the links stop moving, but the nodes seem fine. This occurs in firefox, haven't tried other browsers yet.

[John Bell]

This error occurs in firefox when opening the html document.

Everything is fine in Chrome, however it is very very slow.

IE is of course completely broken, where it is not drawing the links at all.

What browser specific things could be causing this problem.

// init D3 force layout
var force = d3.layout.force()
    .nodes(nodes)
    .links(links)
    .size([width, height])
    .linkDistance(function(d){return d.length;})
    .charge(-1000)
.alpha(0.05)
.gravity(0.1)
.friction(0.5)
.chargeDistance(400)
    .on('tick', tick);

[Phuoc Do]

Hi John,

Your container div probably doesn't have width and height specified so they don't show up. Check css styling.

We append svg to div element on our site. See here:

https://vida.io/documents/FTC9fmmEP2Geg735z

Styling of our #canvas:

1. min-height: 240px;
2. width: 100%;
3. margin: 5px 0 10px 0;
4. overflow: auto;
5. border: 1px solid #fff;

Phuoc Do

https://vida.io/dnprock

[John Bell]

Hi Paul,

Please see the first attached image.

This is my graph when rendered in Firefox with the svg appended to <div id="chart"></div> with no associated style. The links seems to be holding the nodes together, but their associated lines are not updating. Hovering over the white nodes leads to the result seen in the second attached image, where nodes seem to disappear and links don't seem to hold the nodes together anymore. Sometimes it corrects itself, but it is not production ready. Any clues? The graph works as expected in the body, but not in the chart div.

As per your last comments.

The same result occurs when i set the style to match the dimensions. I even tried larger dimensions on the chart div. Both tests were done with and without "display:block".

The results are sadly the same.

[John Bell]

When using a div instead of body to append the svg, the browser will draw the links incorrectly.

When i reload the browser it works fine. So it's only when i double click the html file from an explorer window and the browser is opening up first time.

Above is the rendering issue in IE.

Chrome is very slow.

[Phuoc Do]

Hi John,

First, I'm Phuoc (Phu) not Paul :) Looks like you can see svg now. I think your link/node behavior is caused by force layout not configured correctly. It's hard to look at the issue only through screenshot. Can you share you code on github, or our site vida.io.

Phuoc Do

https://vida.io/dnprock

[John Bell]

Hi Phu,

Apologies for not getting the name right. I've been working with a new guy called Paul. Apologies.

I can share my code, certainly. I would like to take a few days to try and comment and organize it to make it easier to navigate.

Thank you. I shall update this thread when i have done this task.

Regards