D3力导向布局基础

Question

我正在涉足使用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>

- Alex

Answer 1

问题在于，你向force.nodes(array)中输入的数组必须是对象数组。

因此：

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

可以工作。甚至只需

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

也可以使脚本正常工作。

- Alex

Answer 2

你需要在force.on处理程序中更新cx和cy。

//update locations
force.on("tick", function(e) {

  circles.attr("cx", function(d) { return d.x - deltaX(d, e) ; })
    .attr("cy", function(d) { return d.y - deltaY(d, e); });
});

而函数deltaX和deltaY取决于您的力模型。

- vittore

---

我原以为force-layout会提供d.x和d.y的更新位置。deltaX()是从哪里来的？我试图查看工作示例，但这些示例总是只返回d.x的更新。 - Alex