背景图片未填充圆圈-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');

Answer 2

您可以使用对象视口坐标[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);