当圆圈改变大小时缩放图像图案

Question

我像这样创建我的图像模式：

    mainSVG
      .append('defs')
      .append('pattern')
      .attr('id', `pic${vertex.id}`)
      .attr('patternUnits', 'userSpaceOnUse')
      .attr('x', -vertex.radius)
      .attr('y', -vertex.radius)
      .attr('width', vertex.radius * 2)
      .attr('height', vertex.radius * 2)
      .append('image')
      .attr('fill', 'red')
      .attr('xlink:href', vertex.picture)
      .attr('width', vertex.radius * 2)
      .attr('height', vertex.radius * 2);

我这样创建我的圈子：

    node
      .enter()
      .append('g')
      .attr('class', 'node')
      .call(force.drag)
      .append('svg:circle')
      .attr('r', x => x.radius)
      .attr('id', x => `node${x.id}`)
      .attr('class', 'nodeStrokeClass')
      .attr('stroke', 'gray')
      .attr('stroke-width', '2')
      .attr('fill', x => `url(#pic${x.id})`)
      .on('mouseover', function(v) {
        d3.select(`#node${v.id}`)
          .transition()
          .attr('r', v.radius * 1.5);
      })
      .on('mouseout', function(v) {
        d3.select(`#node${v.id}`)
          .transition()
          .attr('r', v.radius);
      });

我怎样才能用圆圈来缩放图像？

Answer 1

必要的更改很少：

1. 不要使用.attr('patternUnits', 'userSpaceOnUse')，而是使用.attr('patternContentUnits', 'objectBoundingBox')。
2. 将<pattern> 和<image> 的宽度和高度都设置为1（或100%）。

这是生成的演示（将鼠标悬停在圆圈上）：

const mainSVG = d3.select('svg');

const defs = mainSVG.append('defs')
  .append('pattern')
  .attr('id', 'foo')
  .attr('width', 1)
  .attr('height', 1)
  .attr('patternContentUnits', 'objectBoundingBox')
  .append('image')
  .attr('xlink:href', 'https://cdn2-www.dogtime.com/assets/uploads/2010/12/senior-dog-2.jpg')
  .attr('preserveAspectRatio', 'none')
  .attr('width', 1)
  .attr('height', 1);

const circle = mainSVG.append('circle')
  .attr('r', 30)
  .attr('cx', 150)
  .attr('cy', 75)
  .attr('stroke', 'gray')
  .attr('stroke-width', '2')
  .attr('fill', 'url(#foo)')
  .on('mouseover', function() {
    d3.select(this)
      .transition()
      .attr('r', 70);
  })
  .on('mouseout', function() {
    d3.select(this)
      .transition()
      .attr('r', 30);
  });

<script src="https://d3js.org/d3.v5.min.js"></script>
<svg></svg>

您可以在excellent answer 中阅读更多相关信息（但不是重复的）。