我正在尝试添加两个文本。我希望它们彼此独立,因为目前它们相互干扰,因此我无法准确设置其“ x”和“ y”值。我附加了一个“ foreignObject”,它们都在其中,以及一些类。如果我附加一个'y',则0 ..效果很好,等等。它们两个不能一起使用!也许是因为它们属于同一班级,但是不幸的是我还很新,所以我不确定。我的预期结果是两个文本都锚定在中心节点上(请参阅用于选择中心文本的过滤器),但可以放置而不会互相影响
我的代码:
addOrgNameText() {
const length = this.nodes[0] && this.nodes[0].name ? this.nodes[0].name.length : 0;
const expr = length > 50 || this.mainNodeType !== NODE_IMAGE_TYPE.title;
let titleClass = `Engagement-OrganizationTitle--${expr ? 'Small' : 'Big'}`;
titleClass += this.mainNodeType !== NODE_IMAGE_TYPE.title ? ' Engagement-OrganizationTitle--Uncentered' : '';
this.group
.selectAll('foreignObject')
.data(this.nodes, node => node)
.enter()
.filter(node => !node.parent)
.append('foreignObject')
.attr('class', 'Engagement-GraphNodeLabel')
.attr('x', 0)
.attr('y', 0)
.attr('transform', `translate(0, 0)`)
.attr('width', node => node.depth === 0 ? node.nodeRadius * 2 : this.labelWidth)
.attr('height', node => this.nodeHeight(node))
.style('opacity', node => node.visible ? 1 : 0)
.style('visibility', node => node.visible ? 'visible' : 'hidden')
.append('xhtml:div')
.classed('Engagement-GraphNodeLabelText', node => node.depth !== 0)
.classed('Engagement-GraphOrganizationTitle ' + titleClass, node => node.depth === 0)
.html(node => {
return `<p>1ST TEXT</p>`;
})
.selectAll('foreignObject')
.data(this.nodes, node => node)
.enter()
.filter(node => !node.parent)
.append('foreignObject')
.attr('class', 'Engagement-GraphNodeLabel')
.attr('x', 50)
.attr('y', 100)
.attr('transform', `translate(0, 0)`)
.attr('width', node => node.depth === 0 ? node.nodeRadius * 2 : this.labelWidth)
.attr('height', node => this.nodeHeight(node))
.style('opacity', node => node.visible ? 1 : 0)
.style('visibility', node => node.visible ? 'visible' : 'hidden')
.append('xhtml:div')
.classed('Engagement-GraphNodeLabelText', node => node.depth !== 0)
.classed('Engagement-GraphOrganizationTitle ' + titleClass, node => node.depth === 0)
.html(node => {
return `<p>2ND TEXT</p>`;
});
}
任何帮助将不胜感激,我已经在此上停留了一段时间了。