ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

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

2021-09-04 21:05:13  阅读:250  来源: 互联网

标签:连接线 attr links js source path target


由于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)

 

 

标签:连接线,attr,links,js,source,path,target
来源: https://blog.csdn.net/luoluoaiyuanyuan/article/details/89914171

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有