2

Edit: Not sure how to combine pack with force, but that could be a solution

I started working yesterday on a D3 visualization, and I'm having trouble getting everything to fit onto the screen.

Sometimes things go off the screen, and sometimes half of a circle is on the screen and half is off the screen.

Here's a link where you can look at the visualization

http://codepen.io/anon/full/unkFc

Here's the actual code

http://codepen.io/anon/pen/unkFc

I think the issue may be that i'm using window size for dimensions, but perhaps the visualization isn't displaying in the entire window?

Note that I have codepen because I need this to work in IE8 and JSFiddle doesn't support that

VividD
  • 10,456
  • 6
  • 64
  • 111
LemonMan
  • 2,963
  • 8
  • 24
  • 34

1 Answers1

0

I think the issue is that there are too many elements for the space. If they were to fit on the screen, they would be overlapping.

You can mess with the force.gravity() and force.size() to try to find the perfect balance. See: http://tributary.io/inlet/5817500 (mess with line 73 and 74)

You could also scale the circle size by the number of circles and the size of the window, so that the space of the layout would be the same regardless of those two parameters.

something like

.attr("r", function(d) { 
    return d.count/nodes.length * Math.min([width,height])/someScaleFactor;
})
elsherbini
  • 1,596
  • 13
  • 23
  • I was thinking of maybe trying to use d3.layout.pack()? I'm not sure if force will work, given that my visualization could potentially have a lot of objects. but yeah the scale factor is an idea I was considering – LemonMan Jun 19 '13 at 20:29
  • Also see http://stackoverflow.com/a/9577224/2134824. I think d3.layout.pack might work better, it is just less fun because you don't get to drag things around and fling them :) – elsherbini Jun 19 '13 at 20:31
  • thanks i'll try out what's mentioned in the post. do you know how I would use pack? the pack template is different so i'm not sure how it applies here – LemonMan Jun 19 '13 at 20:34