Основы D3's Force -направленный макет

Я погружаюсь в захватывающий мир силовых -направленных макетов с d3.js. Я разобрался в основах d3, но не могу понять базовую систему для настройки силовой -направленной раскладки.

Прямо сейчас я пытаюсь создать простой макет с несколькими несвязанными пузырями, которые плавают в центре. Довольно просто, верно!? Круги с правильными создаются, но ничего не происходит.

Отредактируйте :проблема, похоже, в том, что force.nodes ()возвращает исходный массив данных. В работающих сценариях force.nodes ()возвращает массив объектов.

Вот мой код:

<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 d.x; })
       .attr("cy", function(d) { return d.y; });
    });

  });


</script>