過渡/動畫化DOM元素的創建/移除

Question

我正在使用d3js構建儀表板，該儀表板在主要SVG上顯示了一個圖形。 但是，當沒有數據時，我希望SVG不存在，因為它看起來就像是大量的空白空間。

我不只是根據需要添加和刪除SVG，而是希望通過某種類型的平滑動畫/過渡來做到這一點，以便突然創建大型DOM元素不會使用戶感到震撼或看起來像是巨大的閃爍。

我對d3轉換的理解是，它們可以用於刪除DOM元素，但不能創建它們。 這個對嗎？ 我的想法是，也許我可以使用d3過渡來更新SVG的大小，但是我不確定這是否是最好的方法。 我認為不是CSS的屬性也消除了使用jQuery animate（）的可能性。 如果d3無法做到這一點，那么還有哪些其他技術可以使我達到預期的效果？ jQuery fadeIn（）不是我想要的，因為它仍然可以立即在整個空間中創建SVG。

Answer 1

您不能直接為創建的動畫制作動畫，但是可以為從零到所需大小的大小變化制作動畫，如以下簡單示例所示。

在調整svg大小之前創建的所有圖形元素在調整大小期間似乎都“已顯示”。

 var svg = d3.select('body').append('svg') .attr('height', 0) .attr('width', 0) svg.append('rect') .attr('fill', 'lightgrey') .attr('width', '100%') .attr('height', '100%') // a stand-in for your normal graph-building logic: svg.append('circle') .attr('cx', 150) .attr('cy', 150) .attr('r', 10) .attr('fill', 'blue') svg.transition().duration(1200) .attr('height', 300) .attr('width', 300) 

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