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

Question

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

如您所见，图像正确填充了大部分圆圈，并且如果我只填充 -> 颜色，圆圈就会正确填充。

代码:

我首先附加一个模式，就像我在网上看到的那样，然后调用该模式的 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));

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

Answer 1

试试这个:

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