javascript - DOM 元素的创建/删除的过渡/动画

Question

我正在使用 d3js 构建一个仪表板，在主 SVG 上显示图形。但是，当没有数据时，我希望 SVG 不存在，因为它看起来就像一大堆空白区域。

我不想仅仅根据需要附加和删除 SVG，而是想使用某种类型的平滑动画/过渡来完成此操作，这样突然创建的大型 DOM 元素就不会令用户感到不舒服或看起来像是巨大的闪烁。

我对d3 transitions的理解的一点是它们可以用来删除 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>