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)

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

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

      _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 标签时不显示的问题

 

 

上一篇:pip离线下载安装第三方库


下一篇:hadoop_(in windows)启动报错(yarn: error Couldn‘t find a package.json file)