Question

我正在使用d3的layout.force引擎创建一个图形，用于强制导向的图形布局。

有一段时间它正在运行，但现在当我执行start()功能时，没有任何反应。我已将代码删除到以下内容：

    var svg = d3.select("#field_d3").append("svg");
    var width = 720;
    var height = 640;
    svg.attr("width", width)
        .attr("height", height);
    var nodes = [
        {nid: "node1", x: width/2, y: height/2},
        {nid: "node2", x: width/2, y: height/2},
        {nid: "node3", x: width/2, y: height/2}
    ];

    var links = [
        { source: 0, target: 1},
        { source: 1, target: 2}];

    var force = d3.layout.force()
        .nodes(nodes)
        .links(links)
        .size([width, height])
        .linkStrength(0.9)
        .friction(0.9)
        .linkDistance(100)
        .charge(-30)
        .gravity(0.1)
        .alpha(0.2);

    console.log("Force layout initilized", force);
    force.on('end', function () {
        console.log("Force Layout calculations complete");
    });

    force.on('start', function () {
        console.log("Force layout started");
    });

    force.on('tick', function () {
        console.log("Force layout is ticking");
    });

    console.log("Starting force layout", force);
    force.start();
    //------------
    console.log("Now after all force layout code");

field_d3是一个id为id = field_d3的div。

但我在控制台中看到的只是

Force layout initilized Object {}
Starting force layout Object {}
Now after all force layout code

没有调用start，end或tick函数。出了什么问题？

Answer 1

你已经剥离了设置宽度和高度的值，这会阻止力布局的运行（它们都是未定义的）。当你把它们粘在一起时它会起作用。例如

var width = 500;
var height = 500;

http://jsfiddle.net/jw2z814e/

为什么D3.layout.force没有正常启动？

1 个答案: