Force layout for Static Chart Label placement

[Amir Rahnama]

I would like to produce a scatter chart with their labels. The problem is that of course in some areas of chart, it gets dense and labels fall on each other. I was looking at D3 examples and the best thing among them was Force layout.

This is what I have done:

var force = d3.layout.force()

            .linkDistance(20)

            .size([availableWidth, availableHeight])

            .nodes(labelsData)

            .start();

force.on("tick", function() {

            labelText.attr("x", function (d) {

                return d.linkEndX;

            })

            .attr("y", function (d) {

                return d.linkEndY;

            })

            .text(function(d) {return d.name;});

         });

The above code does not function, meaning that there is no animation and all that. The problem as I see it is that I have a constant linkDistance while in practice they get closer than that.

What can I really do about this. Is there something where I can tell D3 that the linkDistance is kind of an interval or something? 

I just need two things: they almost have the x and y (since the data cannot be changed) but with a little change in x and y so that no labels collide.

Any help would be appreciated as always.

/Amir

[John Williams]

Amir,

I had a similar problem a while back and was inclined to try force layout of labels. Chris Viau pointed me in the direction of constraint relaxing instead ( https://groups.google.com/d/msg/d3-js/ZdTR-bkI0mI/e9SczxBdDKYJ), and it might be a good alternative solution for you, too. 

You can see the example I worked from here: http://bl.ocks.org/syntagmatic/4054247

But I also knocked together an example on a scatterplot here: http://bl.ocks.org/thudfactor/6688739