背景图像未填充圆圈-D3/JavaScript

见下图- 我无法让我的图像占据整个圆圈，如果我增加高度，那么图片就会降低，我试图在代码中复制问题，以获得最低版本，但很抱歉，我无法做到这一点，我希望如果我显示代码，那么这就够好了，也许有人可以发现我缺少的东西

正如您所看到的，图像正确地填充了大部分圆圈，如果我只是填充->颜色，那么圆圈确实正确地填充了

守则：

正如我在网上看到的那样，我首先附加了一个模式，然后调用该模式的ID以将图像作为填充（url）加载

我错过什么了吗？谢谢你的帮助

insightAddCircleNodes(onClick: (node: EngagementGraphNode) => void): void {

const imgUrl = "https://ewsqa-images.weforum.org/topics/a1Gb0000001k6I5EAI/standard";
const circle = this.group
  .selectAll('circle.node')
  .data(this.nodes)
  .enter();


circle
  .append("pattern")
  .attr("id", "venus")
  .attr("patternContentUnits", "objectBoundingBox")
  .attr("width", "100%")
  .attr("height", "100%")
  .attr("x", 0)
  .attr("y", 0)
  .append("image")
  .attr("xlink:href", imgUrl)
  .attr("x", 0)
  .attr("y", 0)
  .attr("width", 1)
  .attr("height", 1);


circle
  // Centre - main node
  .filter(node => !node.parent)
  .append('circle')
  .classed('Engagement-GraphNode', true)
  .classed('Engagement-GraphNodeBackground', true)
  .classed('Engagement-GraphLeaf', node => node && (node.depth === 4 && !node.isExtraNode))
  .style('fill', node => `url(#venus)`)  <------- HERE IS WHERE I USE THE IMAGE
  // .style('fill', node => `url("engagement/${this.nodes[0].id}#pattern-${node.indicator.icon}")`)

  .style('opacity', node => (node.visible) ? 1 : 0)
  .style('visibility', node => (node.visible) ? 'visible' : 'hidden')
  .on('click', node => onClick(node));

insightAddCircleNodes（onClick:（节点：EngagementGraphNode）=>void:void{
常量imgUrl=”https://ewsqa-images.weforum.org/topics/a1Gb0000001k6I5EAI/standard";
const circle=this.group
.selectAll（'circle.node'））
.data（此.nodes）
.enter（）；
圆圈
.append（“模式”）
.attr（“id”、“维纳斯”）
.attr（“patternContentUnits”、“objectBoundingBox”）
.attr（“宽度”、“100%”）
.attr（“高度”、“100%”）
.attr（“x”，0）
.attr（“y”，0）
.append（“图像”）
.attr（“xlink:href”，imgUrl）
.attr（“x”，0）
.attr（“y”，0）
.attr（“宽度”，1）
.attr（“高度”，1）；
圆圈
//中心-主节点
.filter（节点=>！节点.parent）
.append（'圆'）
.classed（'Engagement-GraphNode'，true）
.classed（'Engagement-GraphNodeBackground'，真）
.classed（'Engagement-GraphLeaf'，node=>node&&（node.depth===4&&！node.isExtraNode））
.style（'fill'，node=>`url（#venus）``url（“参与/${this.nodes[0].id}}{pattern-${node.indicator.icon}”）`）
.style（'opacity'，node=>（node.visible）？1:0
.style（'visibility'，node=>（node.visible）？'visible'：'hidden'）
.on（'click'，node=>onClick（node））；

我的预期结果是，背景中的图像占据了整个中心圆。实际上，我不完全确定圆的大小是如何设置的，但我假设，当我使用“100%”时，它应该填充它，正如我提到的，如果我说尝试增加图案和图像的高度，它只会将图像移低.

试试这个：

...
.append("image")
.attr("xlink:href", imgUrl)
.attr("x", 0)
.attr("y", 0)
.attr("width", 1)
.attr("height", 1)
.attr('preserveAspectRatio', 'xMidYMid slice');

---

可以使用对象视口坐标[0..1]在阵列中定位和缩放图像

注意：xlink:href已弃用，请改用href

图像为768x512，即1.5:1。然后需要将起始图形0.25的x坐标向左移动，以便x=-0.25

使用此方法，您可以选择要填充图案的图像的任何部分

...
.append("image")
.attr("href", imgUrl)
.attr("x", -0.25)
.attr("y", 0)
.attr("width", 1.5)
.attr("height", 1);

---

你不使用正方形的图像，是不是有一种方法，比如说，放大图像，使其填满圆圈？