javascript - 每次将元素添加到 SVG 时播放音频剪辑 - d3.js

Question

每次使用 d3.js 将元素添加到我的 SVG 时，我都会尝试播放音频剪辑，但它只播放一次。有人可以帮忙吗？

imgs = svg.selectAll("image")
            .data(dataset)
            .enter()
            .append("svg:image")
                .attr('width', 75)
                .attr('height', 75)
                .attr('opacity', 0)
                .attr("x", function(d, i) {
                    return d[0] + "px";
                })
                .attr("y", function(d) {
                    return d[1] + "px";  //Height minus data value
                })
                .attr("xlink:href", "./images/skull.png");

imgs.transition()
        .delay(function(d, i) {
            return i * 750;
        })
        .each(function(){
            audio.play();

            audio.currentTime = 0;
            if(audio.ended) {
                console.log('ended');
            }
            else {
                console.log('not ended');
            }
        })
        .duration(1000)
        .attr('opacity', 1);

Answer 1

我还遇到了一些与 d3 回调相关的问题。但我更喜欢明确设置一些属性集，就像我设置 x 位置并在播放音频期间一样。它对我有用。

    imgs.transition()
        .delay(function(d, i) {

            return i * 1000;
        })
        .duration(1000)
   .attr("x", function(d, i) {
                    playAudio();
                    return d[0] + "px";
                })
        .attr('opacity', 1);

  function playAudio()
  {
   audio.play();
  }