D3 v3版本绘制力导向图更新节点时JS控制台报错：Error: circle attribute cx: Expected length, NaN解决办法

D3的v3版本，很古老了。

拿来绘制力导向图，画布初始化的代码如下：

//代码不完整，仅作演示以说明问题
//节点数组var nodes = [ { name: "sssss" ,phone:"18888888888"}, { name: "vvvv" ,phone:"199999999"},{ name: "ggggg" ,phone:"20000000"} ];//连线数组var edges = [ { source : 0 , target: 1 },{ source : 1 , target: 0 }];
//设置画布var width = 1000;  //画布的宽度var height = 1000;   //画布的高度var svg = d3.select("body")     //选择文档中的body元素.append("svg")          //添加一个svg元素.attr("width", width)       //设定宽度.attr("height", height);    //设定高度//定义力导向图布局var force = d3.layout.force().nodes(nodes) //指定节点数组.links(edges) //指定连线数组.size([width,height]) //指定作用域范围.linkDistance(150) //指定连线长度.charge([-400]); //相互之间的作用力//力学作用生效force.start();    //开始作用//添加连线 var svg_edges = svg.selectAll("line").data(edges).enter().append("line").style("stroke","#ccc").style("stroke-width",1);var color = d3.scale.category20();

后来我往节点数组nodes末尾push了一个新元素，再次重绘此力导向图，代码如下：

//添加新节点，重绘力导向图的代码
function reGraph(){nodes.push({name: "ffffuuuuucccckkk" ,phone:"18888888888"});edges.push({source : 0 , target: 3});//添加节点 var svg_nodes = svg.selectAll("circle").data(nodes).enter().append("circle").attr("r",20).style("fill",function(d,i){   //设置填充颜色return color(i);}).on("click", function(d,i){     //添加点击事件alert("这是"+d.name+",电话:"+d.phone);}).call(force.drag);  //使得节点能够拖动//添加描述节点的文字var svg_texts = svg.selectAll("text").data(nodes).enter().append("text").style("fill", "black").attr("dx", 20).attr("dy", 8).text(function(d){return d.name;});force.on("tick", function(){ //对于每一个时间间隔//更新连线坐标svg_edges.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; });//更新节点坐标svg_nodes.attr("cx",function(d){ return d.x; }).attr("cy",function(d){ return d.y; });//更新文字坐标svg_texts.attr("x", function(d){ return d.x; }).attr("y", function(d){ return d.y; });});}

就报了几千个错：

<circle> attribute cx: Expected length, “NaN”

Error: <circle> attribute cx: Expected length, "NaN".

等诸多类似错误，都是告诉我属性缺失。

研究了很久，最后发现问题所在：

指定的节点数组不能直接拿来用作绘图数据。

需要通过force这个转换器转换之后才能作为数据使用。

因此直接push新元素进数组然后刷新力导向图是不可行的，新元素没经过force的处理，缺失了很多属性，故报上述错误。

因此解决办法如下：

1.新建一个节点数组及连线数组，将之前数组的数据如name,phone等自己设定的属性拷贝到新数组

2.新数组push你要添加的元素

3.重新初始化力导向图，这段代码尤其重要：

//定义力导向图布局var force = d3.layout.force().nodes(nodes) //指定节点数组.links(edges) //指定连线数组.size([width,height]) //指定作用域范围.linkDistance(150) //指定连线长度.charge([-400]); //相互之间的作用力//力学作用生效force.start();    //开始作用

因为新增的元素一样需要经过force的转换处理才能作为绘制节点的数据使用，具体见以下博主的这段话

如何理解布局从上面的图可以看到，布局的作用是：将不适合用于绘图的数据转换成了适合用于绘图的数据。因此，为了便于初学者理解，将布局的作用解释成：数据转换。布局有哪些D3 总共提供了 12 个布局：饼状图（Pie）、力导向图（Force）、弦图（Chord）、树状图（Tree）、集群图（Cluster）、捆图（Bundle）、打包图（Pack）、直方图（Histogram）、分区图（Partition）、堆栈图（Stack）、矩阵树图（Treemap）、层级图（Hierarchy）。12 个布局中，层级图（Hierarchy）不能直接使用。集群图、打包图、分区图、树状图、矩阵树图是由层级图扩展来的。如此一来，能够使用的布局是 11 个（有 5 个是由层级图扩展而来）。这些布局的作用都是将某种数据转换成另一种数据，而转换后的数据是利于可视化的。
————————————————
版权声明：本文为CSDN博主「Lelliam」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/qq_31052401/article/details/93786425

然后接上述重绘代码即可。

总结：本次错误原因是节点数组、连线数组新增元素后，未做转换处理直接拿来绘图，而我们知道，未经转换器处理的数据是无法用于绘图的，会导致很多绘图必须的属性缺失，因此，需将数组拷贝后重新用转换器如force（此处是力导向图，仅用force说明问题）转换后重绘，就不会导致属性缺失了。

--------end------------

D3 v3版本绘制力导向图更新节点时JS控制台报错：Error: circle attribute cx: Expected length, NaN解决办法相关推荐

d3力导向图增加节点_d3.js力导向图节点如何都显示在边框内
最近用到d3.js中的force力导向图,想实现效果如下,所有城市节点都在可视范围内,如果超出有滚动条也可以. 遇到的问题是,当节点一多,有的节点就会跑到外面去,这边是通过加大charge相互作用力, ...
d3力导向图增加节点_D3.js+Es6+webpack构建人物关系图(力导向图)，动态更新数据，点击增加节点，拖拽增加连线......
Java学习手记2--多线程一.线程的概念 CPU执行程序,就好比一个人在干事情一样,同一个时间你只能做一件事情,但是这样的效率实在是太低了,在你用电脑的时候,听歌就不能浏览网页,看电影就不能下载视 ...
D3 笔记十：力导向图
本文目前来说,是学完极客学院的<D3.js 入门教程>之后的整理出来的精简知识版,仅仅是为了知识整理.后期我会随着学习的深入,在这个基础上,进行维护与更改. 一.力导向图我们先来了解一下 ...
用Echarts画力导向图，节点文字随鼠标缩放而缩放
项目场景: 用Echarts画力导向图,节点文字随鼠标缩放而缩放解决方案: 用原生函数getZr()或_zr()实现,例子如下: this.nodes=[],//节点数据 this.links=[] ...
利用D3.js快速绘制力导向图
碎碎念: 最近课题需要基于图论和力导向图可视化每个脑电通道之间的连接性,MATLAB画的效果差强人意,于是上网搜寻到JavaScript 的一个函数库--D3.js,想快速得到数据的可视化结果简介D ...
Mac os更新系统后安装scrapy报错error: command ‘xcrun‘ failed with exit status 1
查看报错信息: In file included from src/twisted/test/raiser.c:4: In file included from /Library/Developer/ ...
更新后的Hbuilder X 报错 error: cannot find module ‘open‘
HBuilder更新完以后运行到微信小程序模拟器出现报错. 在工具,插件安装中,找到插件uni-app编译卸载,然后重新安装即可.
使用d3.v3插件绘制出svg图
众所周知,这个插件使用的svg技术,而IE8(包括IE8)之前的浏览器是不支持svg的接下来看代码吧从后台获取到带id和父id的目录数据[json格式] var module = requestU ...
力扣报错 error: ＜identifier＞ expected

D3 v3版本绘制力导向图更新节点时JS控制台报错：Error: circle attribute cx: Expected length, NaN解决办法

D3 v3版本绘制力导向图更新节点时JS控制台报错：Error: circle attribute cx: Expected length, NaN解决办法相关推荐

最新文章

热门文章

D3 v3版本绘制力导向图更新节点时JS控制台报错 ：Error: circle attribute cx: Expected length, NaN解决办法

D3 v3版本绘制力导向图更新节点时JS控制台报错 ：Error: circle attribute cx: Expected length, NaN解决办法相关推荐

最新文章

热门文章

D3 v3版本绘制力导向图更新节点时JS控制台报错：Error: circle attribute cx: Expected length, NaN解决办法

D3 v3版本绘制力导向图更新节点时JS控制台报错：Error: circle attribute cx: Expected length, NaN解决办法相关推荐