www.lom599.comD3.jsv4 力导向图构造 一定要用tick 办法么才干失掉精确地数据坐标点么?

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.forceSimulationnodes
                  .force"link", d3.forceLinklinks.distance100
                  .force"charge",d3.forceManyBody
                  .force"center",d3.forceCenterwidth/2, height/2;
    
    
            var color = d3.scaleOrdinald3.schemeCategory20;  
            // 绘制
            var svg_links = svg.selectAll"line"
                .datalinks
                .enter
                .append"line"
                .style"stroke","#ccc"
                .style"stroke-width",3;
    
            var svg_nodes = svg.selectAll"circle"
                .datanodes
                .enter
                .append"circle"
                .attr"r",10
                .style"fill",functiond,i{
                    return colori;
                }    
                .attr"cx",functiond{return d.x;}
                .attr"cy",functiond{return d.y;};
            
            var svg_text = svg.selectAll"text"
                .datanodes
                .enter
                .append"text"
                .style"fill","#000"
                .attr"dx",20
                .attr"dy",10
                .textfunctiond{return d.name;};
    
            console.log"转换后的nodes links数据:";
            console.lognodes;
            console.loglinks;
            
            function draw{
                svg_nodes
                    .attr"cx",functiond{console.logd;return d.x;}
                    .attr"cy",functiond{return d.y;};
    
                svg_text
                    .attr"x", functiond{ return d.x; }
                     .attr"y", functiond{ return d.y; };
    
                svg_links
                    .attr"x1",functiond{return d.source.x; }
                     .attr"y1",functiond{ return d.source.y; }
                     .attr"x2",functiond{ return d.target.x; }
                     .attr"y2",functiond{ return d.target.y; };
            }
            simulation.on"tick",draw;
            //draw;
        

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

上述代码中为什么我不克不及在失掉nodes links数据后,直接调用draw 绘制呢,这个时分的数占据题目,用tick正常,为什么?
类似题目
Why do we need force.ontick.. in d3

在console中央 以为曾经失掉精确的节点线路坐标数据,

然后就可以直接绘制调用draw 办法把对应的坐标数据绑定到元素上如许应该就ok了,但理想上在demo中注释tick办法调用,直接draw 失掉的后果是如许

都跑到左上角去了,理想上此时的坐标点地位并不是方才console.log输入的那些数据。
我在draw 办法中输入了数据

比如Beijingz这个点的 坐标地位0,0,下面节点表现的地位也和之前不同错误。但我把输入的object展开看数据又是对的。

有点懵逼,这是怎样回事呢?

tick办法的作用,我的理解是没到一个时辰都要调用里面的办法更新节点坐标地位。
但我只想初始化数据失掉可绘制的数据,然后初始化表现,后面的节点拖拽更新自己写办法来做,只是想用力导向图来转换第一次的数据。

自问自答
有一点要明晰便是 力导向图构造的构成是一个异步的进程并且需求一定工夫几秒钟
以是当draw 去实行的时分,力导向图构造并没有完成,以是取到各节点的坐标是很小的偏移量,如上图三。以是绘制的图形都在左上角去了。
验证这一点,加个setTimeout就行了

setTimeoutdraw,5000;

你会发明几秒后构造不好了,数据就正常了绘制出来的图形就OK了,但为什么console.log打印出来的数据展休会变是什么缘由呢,调试东西的题目,猎奇特。

(看完/读完)这篇文章有何感想! www.lom599.com的分享…

发表评论

姓名 *
电子邮件 *
站点