Fisheye effect D3js image slideshow works on rects/objects but not image files, Error: <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

我非常感谢您提供帮助，让该代码段正常工作，如果可能的话，能像本网站一样顺利 link！那是 Bossstock 自己制作的，我是 d3 新手，所以我完全不懂。

Answer 1

我解决了我的问题-

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

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

Fisheye effect D3js image slideshow works on rects/objects but not image files, Error: <image> attribute x: Expected length, "NaN"

Fisheye effect D3js image slideshow works on rects/objects but not image files, Error: <image> attribute x: Expected length, "NaN"

javascript

slide

d3.js