6

私は 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>
4

2 に答える 2

3

ここに問題がありました。フィードforce.nodes(array)する配列は、オブジェクトの配列である必要があります。

そう：

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

動作します。または単に

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

スクリプトを正常に動作させます。

于 2012-08-12T21:41:30.223 に答える