时间戳

首页 > 解决方案 > 背景图像未填充圆圈 - D3/JavaScript

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

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

标签： javascriptangulard3.jssvg

解决方案

尝试这个：

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

推荐阅读