Фоновое изображение не заполняет круг - D3 / JavaScript

Question

Смотри изображение ниже - Я не могу заставить свое изображение занимать весь круг, если я увеличиваю высоту, тогда картинка просто уменьшается, я изо всех сил пытался воспроизвести проблему в коде для минимальной версии, но мне жаль, что я просто не смог сделать это, я надеюсь, что если я покажу код, то это достаточно хорошо, и, возможно, кто-то может заметить то, что мне не хватает.

Изображение правильно заполняет большую часть круга, как вы можете видеть, и круг действительно заполняется правильно, если я просто заполняю -> цвет.

код:

Сначала я добавляю шаблон, как я видел в Интернете, а затем вызываю его идентификатор, чтобы изображение загружалось как заливка (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

Вы можете позиционировать и масштабировать изображение в шаблоне, используя координаты области просмотра объекта [0..1].

Примечание: xlink: href устарело, используйте href вместо

Изображение 768x512, то есть 1,5: 1. Затем вам нужно переместить координату x начала рисования на 0,25 влево, поэтому x = -0,25.

Используя этот метод, вы можете выбрать любую часть изображения, которую хотите заполнить узором.

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

Answer 2

Попробуйте это:

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