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