Question

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

我不想仅仅根据需要添加和删除SVG，而是希望通过某种类型的平滑动画/过渡来实现这一点，以便突然创建大型DOM元素并不会使用户感到厌烦或看起来像是巨大的闪烁。

我对d3 transitions的理解是它们可用于删除DOM元素，但不能用于创建它们。它是否正确？我的想法是，也许我可以使用d3过渡来更新SVG的大小，但我不确定这是否是最好的方法。不是CSS的属性也消除了我认为使用jQuery animate()的可能性。如果d3不能做到这一点，还有哪些其他技术可以让我达到预期的效果？ jQuery fadeIn（）不是我想要的，因为它仍会在整个空间中立即创建SVG。

Answer 1

您无法直接为动画制作动画，但您可以将尺寸更改从零设置为所需大小，如此简单示例所示。

您在调整svg大小之前创建的任何图形元素都会显示为＆＃34;显示＆＃34;在调整大小期间。

＆＃13;

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)

＆＃13;

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

＆＃13;

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

1 个答案: