D3 Basics Power Layout

Question

I plow into the exciting world of power layouts with d3.js. I have an understanding of the basics of d3, but I can’t understand the basic system for setting up a layout aimed at amplification.

Now I'm trying to create a simple layout with several unbound bubbles that float to the center. Pretty simple right !? Circles with the correct ones are created, but nothing happens.

Edit: The problem is that force.nodes () returns the original data array. When running scripts, force.nodes () returns an array of objects.

Here is my code:

<script> $(function(){ var width = 600, height = 400; var data = [2,5,7,3,4,6,3,6]; //create chart var chart = d3.select('body').append('svg') .attr('class','chart') .attr('width', width) .attr('height', height); //create force layout var force = d3.layout.force() .gravity(30) .alpha(.2) .size([width, height]) .nodes(data) .links([]) .charge(30) .start(); //create visuals var circles = chart.selectAll('.circle') .data(force.nodes()) //what should I put here??? .enter() .append('circle') .attr('class','circles') .attr('r', function(d) { return d; }); //update locations force.on("tick", function(e) { circles.attr("cx", function(d) { return dx; }) .attr("cy", function(d) { return dy; }); }); }); </script> 

Answer 1

Here is the problem. The array you load into force.nodes(array) must be an array of objects.

So:

var data = [{number:1, value:20}, {number:2, value:30}...];

works. Or even just

var data=[{value:1},{value:2}];

makes the script work efficient.

Answer 2

You need to update cx and cy in the force.on handler.

 //update locations force.on("tick", function(e) { circles.attr("cx", function(d) { return dx - deltaX(d, e) ; }) .attr("cy", function(d) { return dy - deltaY(d, e); }); }); 

Both the deltaY and deltaY depend on your strength model.