举个例子:
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坐标。
由于