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();
  }

Answer 2

我通过使用D3过渡的“结束”事件来解决这个问题。

imgs.transition()
        .delay(function(d, i) {
            return i * 500;
        })
        .duration(400)
        .attr('opacity', 1)
        .each("end", function(d,i){
            if(i !== 0) {
                audio.pause();
                audio.currentTime = 0;
            }
            audio.play();
        });

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

2 个答案: