d3.js 力导向图关系连接线使用 path 标签时不显示的问题

由于d3.js版本差异，再用d3开发力导向图时，使用path标签时可能会出现不显示的问题，特记录该问题。

// links 连接线设置，使用path标签

_this.links = g.append('g')

.attr('stroke', '#999')

.attr('stroke-opacity', 0.6)

.selectAll('path')

.data(links)

.join('path')

.attr('stroke-width', d => Math.sqrt(d.value))

.attr('class', 'link')

// 创建一个模拟力

#方法一：使用该写法时，连接线不能正常显示

_this.simulation.on('tick', () => {

_this.links

.attr('d', d => 'M' + d.source.x + d.source.y + ' L ' + d.target.x + d.target.y)

#方法二：使用该写法时，连接线可以正常显示

_this.simulation.on('tick', () => {

_this.links

.attr('d', d => 'M' + d.source.x + ' ' + d.source.y + ' L ' + d.target.x + ' ' + d.target.y)

d3.js 力导向图关系连接线使用 path 标签时不显示的问题相关推荐

D3.js 力导向图的显示优化
D3.js 作为一个前端,说到可视化除了听过 D3.js 的大名,常见的可视化库还有 ECharts.Chart.js,这两个库功能也很强大,但是有一个共同特点是封装层次高,留给开发者可设计和控制的部 ...
D3.js 力导向图来处理拓扑图
记录一点碰到的问题和解决方案.感觉国内关于D3.js 4.0版本的相关资料还是少. 力导向图布局 D3一种布局的方式,可以将你nodes links的节点数据转换成可以绘制的坐标点数据,然后通过svg ...
d3.js力导向图使用详解
创建一个力导向图需要三个东西: 仿真模拟系统节点力当然,一般我们也会创建links(边)来连接两个节点,例如上图仿真模拟系统中存在多个节点和多种类型的力,通过力控制节点的运动,每个节点都在多个 ...
d3 svg path添加文本_D3.js 力导向图的显示优化
D3.js 作为一个前端,说到可视化除了听过 D3.js 的大名,常见的可视化库还有 ECharts.Chart.js,这两个库功能也很强大,但是有一个共同特点是封装层次高,留给开发者可设计和控制的部 ...
echarts力导向图节点连线动画_D3.js 力导向图的显示优化（二）- 自定义功能
摘要: 在本文中,我们将借助 D3.js 的灵活性这一优势,去新增一些 D3.js 本身并不支持但我们想要的一些常见的功能:Nebula Graph 图探索的删除节点和缩放功能前言在上篇文章中(D ...
d3力导向图增加节点_d3.js力导向图节点如何都显示在边框内
最近用到d3.js中的force力导向图,想实现效果如下,所有城市节点都在可视范围内,如果超出有滚动条也可以. 遇到的问题是,当节点一多,有的节点就会跑到外面去,这边是通过加大charge相互作用力, ...
vis.js力导向图第三弹——双击扩展节点
正经学徒,佛系记录,不搞事情基于上文:https://blog.csdn.net/qq_31748587/article/details/84143153 的项目不能扩展节点的图是没有灵魂的,vi ...
使用d3.js开发力导向图
最近项目需要写一个d3的力导向图,之前没接触过d3.js 所以吧这次开发的经历写一下文章目录分配点与线创建dom 线点绘制线友情提示:不要让设计设计的华丽呼哨,点多了很卡,而且svg 有些 ...
python力导向图论文_力导向图（关系图） echarts的运用
Echarts关系图-力引导布局需要做一个树形图,可以查看各个人员的关系. 可伸缩的力引导图-失败刚开始,打算做一个可展开和伸缩的,搜索时候发现CSDN有一篇美美哒程序媛写的Echarts For ...

d3.js 力导向图关系连接线使用 path 标签时不显示的问题

d3.js 力导向图关系连接线使用 path 标签时不显示的问题相关推荐

最新文章

热门文章

d3.js 力导向图 关系连接线 使用 path 标签时不显示的问题

d3.js 力导向图 关系连接线 使用 path 标签时不显示的问题相关推荐

最新文章

热门文章

d3.js 力导向图关系连接线使用 path 标签时不显示的问题

d3.js 力导向图关系连接线使用 path 标签时不显示的问题相关推荐