动态显示D3中的图像

我想要将一系列图像显示为动画 - 我会使用GIF，但我想操作特定的帧。动态显示D3中的图像

我已将图像显示在SVG画布上，现在我想动态更改xlink:href。

function startAnimation(){ 
    c += 1; 
    d3.select(this) 
     .transition() 
     .attr("xlink:href", "images/image-" + c.toString() +".png") 
     .each("end", startAnimation);  
};

这种方式工作得很好，如果我试图改变像图像高度的属性，但它似乎并没有与属性xlink:href工作。

有没有办法像这样动态更新图像？

来源

2012-10-15 Amyunimus

在开始动画序列之前，您需要预加载并缓存图像。否则，图像将被懒惰地加载 - 并且图像加载250毫秒并不是不合理的，这意味着在加载图像时，您将进入下一帧。

对于HTML元素，可以通过创建图像对象（new Image），设置src属性，然后侦听加载事件（onload）以查看所有图像何时准备就绪来预加载。当您从预加载的Image中设置显示的HTML img元素的src时，浏览器使用缓存的内存映像。

虽然这种技术可能对SVG图像起作用，也可能不起作用。一个更好的技术是使用精灵表，将动画中的所有帧合并成一张图像，然后在客户机上剪切。在HTML中，您通常使用背景位置样式;在SVG中，你可以通过剪辑或溢出来做同样的事情：隐藏。

另一种选择是创建多个元素，然后隐藏除一个之外的所有元素（例如，通过不透明或将元素定位在屏幕外）。

（此外，因为您不插属性，它可能是更容易使用的setInterval为动画而不是d3.transition。）

来源

2012-10-15 04:54:53 mbostock

大 - 我觉得精灵表会为这项工作做得很好。谢谢！ – Amyunimus

nodeEnter.append("svg:image") 
    .attr('x',-9) 
    .attr('y',-12) 
    .attr('width', 15) 
    .attr('height', 24)  
    .attr("xlink:href", function(d) { 
     if(d.Type=="name"){ 
     return "/images/icon-1.png";} 
     else{ 
      return "/images/icon-2.png";} 
      });

来源

2013-08-23 05:25:19

动态显示D3中的图像

回答

相关问题