Javascript 如何使用d3.js将svg附加到先前存在的svg？

是否可以使用d3.js将另一个svg附加到先前存在的svg父级

我知道使用“svg:image”属性是可能的。 但不幸的是，我失去了对内心孩子的完全控制

dom节点由d3创建，但不呈现，因此页面保持空白

希望有人能帮忙，thx提前：

以下是我得到的：

Html CSS svg主包装器{ 位置：绝对位置； 最小宽度：100%； 最小高度：100%； 底部：0； 填充：0； 保证金：0； } 您的问题是：是否可以使用D3将SVG附加到SVG？但是，标题中的这个对象有点误导，如果您真的在谈论一个外部SVG，甚至是加载一个外部SVG，那么您就错了，下面的解释将是无用的。在这种情况下，像这样的答案会更有用

答案是肯定的。无论出于何种原因，您可能不需要嵌套这些SVG，只需像对待任何其他元素一样使用append方法即可

这是一个演示，看看控制台：SVG中有一个SVG

var svg=d3.selectbody.appendsvg； svg.appendtext attry先生，20岁 .text此文本位于外部SVG中； var innerssvg=svg.appendsvg； innerSVG.appendtext attry先生，50岁 .text此文本位于内部SVG中； var mySVG=new XMLSerializer.serializeToStringsvg.node； console.logmySVG

---

如您所见，我们的组件将是代码驱动的，模板中除了一个div之外没有任何内容，div将用作我们的容器。图表大小将从该元素的大小推断出来，这将有助于使SVG像正常的html节点一样反应。以下是代码的主要部分，即“src/app/bar chart/bar chart.component.ts”文件：

 private createChart(): void {
    d3.select('svg').remove();
    const element = this.chartContainer.nativeElement;
    const data = this.data;
    const svg = d3.select(element).append('svg')
        .attr('width', element.offsetWidth)
        .attr('height', element.offsetHeight);
    const contentWidth = element.offsetWidth - this.margin.left - this.margin.right;
    const contentHeight = element.offsetHeight - this.margin.top - this.margin.bottom;
    const x = d3
      .scaleBand()
      .rangeRound([0, contentWidth])
      .padding(0.1)
      .domain(data.map(d => d.letter));
    const y = d3
      .scaleLinear()
      .rangeRound([contentHeight, 0])
      .domain([0, d3.max(data, d => d.frequency)]);
    const g = svg.append('g')
      .attr('transform', 'translate(' + this.margin.left + ',' + this.margin.top + ')');
    g.append('g')
      .attr('class', 'axis axis--x')
      .attr('transform', 'translate(0,' + contentHeight + ')')
      .call(d3.axisBottom(x));
    g.append('g')
      .attr('class', 'axis axis--y')
      .call(d3.axisLeft(y).ticks(10, '%'))
      .append('text')
        .attr('transform', 'rotate(-90)')
        .attr('y', 6)
        .attr('dy', '0.71em')
        .attr('text-anchor', 'end')
        .text('Frequency');
    g.selectAll('.bar')
      .data(data)
      .enter().append('rect')
        .attr('class', 'bar')
        .attr('x', d => x(d.letter))
        .attr('y', d => y(d.frequency))
        .attr('width', x.bandwidth())
        .attr('height', d => contentHeight - y(d.frequency));
  }
}

---

链接站点：

当您提到svg:image属性时，是否尝试使用image元素-g.append'image'？这种方法有什么问题？内部SVG元素将是另一个复杂的SVG图形。如果它只是一个图像标记，我无法进一步操作它的子节点。您是要绘制内部SVG还是要导入已经制作好的SVG？在最后一种情况下，检查我答案中的链接。@GerardoFurtado上述代码有效。我想附加输入复选框。怎么做？？谢谢你advance@Arunjai你想要什么还不清楚。请将此作为一个新问题发布，并附上所有相关详细信息。Hi@GerardoFurtado，如上面代码所示，右键追加文本，如我要追加的复选框。如何做到这一点。如果这还不清楚，我会发布一个新问题。@Arunjai，这很不一样。除此之外，我无法回答评论部分的问题，因此请将其作为新问题发布。