Demo
http://codepen.io/jingxiao/pe...

var nodes = [ { name: "BeiJing" }, { name: "XiaMen" }, { name: "XiAn" }, { name: "HangZhou" }, { name: "ShangHai" }, { name: "QingDao" }, { name: "NanJing" } ]; var links = [ { source : 0 , target: 1 } , { source : 0 , target: 2 } , { source : 0 , target: 3 } , { source : 1 , target: 4 } , { source : 1 , target: 5 } , { source : 1 , target: 6 } ]; var width = 800; var height = 600; var svg = d3.select("body") .append("svg") .attr("width",width) .attr("height",height); // 通过布局来转换数据，然后进行绘制 var simulation = d3.forceSimulation(nodes) .force("link", d3.forceLink(links).distance(100)) .force("charge",d3.forceManyBody()) .force("center",d3.forceCenter(width/2, height/2)); var color = d3.scaleOrdinal(d3.schemeCategory20); // 绘制 var svg_links = svg.selectAll("line") .data(links) .enter() .append("line") .style("stroke","#ccc") .style("stroke-width",3); var svg_nodes = svg.selectAll("circle") .data(nodes) .enter() .append("circle") .attr("r",10) .style("fill",function(d,i){ return color(i); }) .attr("cx",function(d){return d.x;}) .attr("cy",function(d){return d.y;}); var svg_text = svg.selectAll("text") .data(nodes) .enter() .append("text") .style("fill","#000") .attr("dx",20) .attr("dy",10) .text(function(d){return d.name;}); console.log("转换后的nodes links数据:"); console.log(nodes); console.log(links); function draw(){ svg_nodes .attr("cx",function(d){console.log(d);return d.x;}) .attr("cy",function(d){return d.y;}); svg_text .attr("x", function(d){ return d.x; }) .attr("y", function(d){ return d.y; }); svg_links .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; }); } simulation.on("tick",draw); //draw();

通过力导向图来转换节点nodes和线路links为可绘制的数据，然后去绘制连线图。有个疑问是tick()方法。

上述代码中为什么我不能在得到nodes links数据后，直接调用draw() 绘制呢，这个时候的数据有问题，用tick正常，为什么？
类似问题
Why do we need force.on('tick'.. in d3

在console地方 感觉已经得到正确的节点线路坐标数据，

然后就可以直接绘制调用draw() 方法把对应的坐标数据绑定到元素上这样应该就ok了，但事实上在demo中注释tick方法调用，直接draw() 得到的结果是这样

都跑到左上角去了，事实上此时的坐标点位置并不是刚刚console.log()输出的那些数据。
我在draw()方法中输出了数据

比如Beijingz这个点的 坐标位置(0,0),下面节点显示的位置也和之前不对。但我把输出的object展开看数据又是对的。

有点懵逼，这是怎么回事呢？

tick()方法的作用，我的理解是没到一个时刻都要调用里面的方法更新节点坐标位置。
但我只想初始化数据得到可绘制的数据，然后初始化显示，后面的节点拖拽更新自己写方法来做，只是想用力导向图来转换第一次的数据。