javascript - 鱼眼效果 D3js 图像幻灯片适用于矩形/对象但不适用于图像文件，错误 : <image> attribute x: Expected length, "NaN"

Question

我的问题是，当图像没有如下内容时，动画效果很好，但是一旦加载它们，我就会收到以下错误:Error: <image> attribute x: Expected length, "NaN".这是一个代码片段:

var data = ['https://cdn.britannica.com/60/8160-050-08CCEABC/German-shepherd.jpg', 'https://cdn.britannica.com/60/8160-050-08CCEABC/German-shepherd.jpg', 'https://cdn.britannica.com/60/8160-050-08CCEABC/German-shepherd.jpg', 'https://cdn.britannica.com/60/8160-050-08CCEABC/German-shepherd.jpg', 'https://cdn.britannica.com/60/8160-050-08CCEABC/German-shepherd.jpg'];

var w = window,
  d = document,
  e = d.documentElement,
  g = d.getElementsByTagName('body')[0],
  wid = 400
y = 400;

var svg = d3.select("body").append("svg")
  .attr("width", wid)
  .attr("height", "400")
  .on('mousemove', () => {
    let x = event.x - 20;
    d3.selectAll('.content')
      .attr('x', (d, i) => fisheye(d, x))
  })
  .on('mouseleave', () => {
    d3.selectAll('.content').transition().attr(
      'x', (d, i) => xScale(i))
  })

var chart = svg.append('g')
  .classed('group', true)


let xScale = d3.scaleBand().domain(d3.range(5)).range([0, wid]).padding(0)

let rects = svg.selectAll('content')
  .data(
    d3.range(5)
    //data //(uncomment this, and comment line above to try loading images)
  )

rects.exit().remove();

rects.enter()
  .append("svg:image")
  .attr("xlink:href", d => d)
  .attr("class", "content")
  .attr("y", 0)
  .attr("x", (d, i) => xScale(i))
  .attr("width", "300px")
  .style("opacity", 1)
  .attr("stroke", "white")
  .style('fill', 'rgb(81, 170, 232)')
  .attr("height", 400);

let distortion = 10;

function fisheye(_, a) {
  let x = xScale(_),
    left = x < a,
    range = d3.extent(xScale.range()),
    min = range[0],
    max = range[1],
    m = left ? a - min : max - a;
  if (m === 0) m = max - min;

  return (left ? -1 : 1) * m * (distortion + 1) / (distortion + (m / Math.abs(x - a))) + a;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>

我正在尝试制作如下所示的东西:
https://www.nytimes.com/newsgraphics/2013/09/13/fashion-week-editors-picks/index.html
我真的很感激一些帮助，让这个片段工作，如果可能的话，就像这个网站链接一样顺利!那是由 Bossstock 自己制作的，我是 d3 新手，所以我完全不了解。

Answer 1

我发现了我的问题-

let xScale = d3.scaleBand().domain(data).range([0,wid]).padding(0)

域是 d3.range(5)而不是我的data多变的。