使用强制布局控制图形的显示,而不指定节点中的x / y坐标

时间:2016-03-09 18:57:26

标签: javascript d3.js graph hierarchy force-layout

举个例子:

  var graph = {
        "nodes": [
            { "name": "Myriel", "group": 1 }, //0
            { "name": "Napoleon", "group": 1 }, //1
            { "name": "Mlle.Baptistine", "group": 1 }, //2
            { "name": "Mme.Magloire", "group": 1 }, //3
            { "name": "CountessdeLo", "group": 1 },//4
            { "name": "Geborand", "group": 1 }
            // { "name": "Champtercier", "group": 1 }
        ],
        "links": [
            { "source": 0, "target": 1, "value": 50},
            { "source": 1, "target": 2, "value": 50},
            { "source": 2, "target": 0, "value": 50},
            { "source": 3, "target": 4, "value": 50},
            { "source": 4, "target": 5, "value": 50},
            { "source": 5, "target": 3, "value": 50}
        ]
    } 

   var force = d3.layout.force()
        .linkDistance(function (d){
            return d.value;
        })
        .size([width, height])
        .nodes(graph.nodes)
        .links(graph.links)
        .friction(0)
        .chargeDistance(200)

   var link = svg.selectAll(".link")
        .data(graph.links)
        .enter().append("line")
        .attr("class", "link")
        .style("stroke-width", function (d) {
            return Math.sqrt(d.value);
            });

    var node = svg.selectAll(".node")
        .data(graph.nodes)
        .enter().append("circle")
        .attr("class", "node")

    force.on('tick', function () {
        node.attr('r', 15)
            .attr('cx', function (d) { return d.x; })
            .attr('cy', function (d) { return d.y; });

        link.attr('x1', function (d) { return d.source.x; })
            .attr('y1', function (d) { return d.source.y; })
            .attr('x2', function (d) { return d.target.x; })
            .attr('y2', function (d) { return d.target.y; });
    });

     force.start();

当我在没有指定x和y坐标的节点中传递时,有一种方法可以控制图形的布局。例如,我上面的链接创建了两个单独的三角形图形,但有时它们会相互叠加。我想知道是否有可以使用的财产(摩擦,充电距离,充电等)。这样我就可以在同一条线上将两个三角形图形彼此相邻设置?或者我是否需要指定x和y坐标以获得该外观?看起来摩擦有助于将它们分开,但很难说。

我也希望得到澄清 - 我的nodes数组中的第一个对象是否与我的links数组中的第一个对象相对应?它们是否相关,因为它们的索引都是0或者它是如何工作的?我很难跟踪它。第一个节点对象的源是0,然后它的目标是节点数组中的第二个对象(源为1,目标1)?

我的最后一个问题是有一种方法来显示节点而不使用" end"或者"打勾"。我希望图表在加载时只显示在页面上,但是" end"显示和使用" tick"需要很长时间才能显示他们滑到我不想要的页面上。当我尝试添加链接attr时,就像我在" tick"函数我得到一个未定义的错误,因为它无法找到x和y坐标。

由于

0 个答案:

没有答案