Question

我有一个SVG和一个基于宽度和高度在SVG内部呈现的图表。我想建立一个页面，其中有多个SVG，每个SVG包含一个图表，点击的SVG然后展开一点。我可以在没有过渡的情况下做到这一点，但我想让它在视觉上吸引人。如果我能做到这样的话会很棒：

svg.transition().duration(whatever).attr("width",whatever);

但我希望在转换发生时不断运行图表调整大小功能。当然，我可以在svg上启动转换，然后在图表元素上进行单独的转换，但我的理解是不能保证以相同的速度前进，并且转换的时间不能保证准确。我能想到的最简单的方法是在SVG的width属性上设置某种监听器，但是一些堆栈溢出搜索表明这是不可能的。他们都提出了一个调用侦听器然后重置值的setter函数，但这在这里不起作用，因为转换正在处理所有这些。

一旦我完成了，我将做的不仅仅是调整宽度我不需要帮助，我只想知道是否有一种方法可以在转换过程中运行图表调整大小功能在某种程度上这样，当svg过渡时，图表将继续保持正确的大小。

感谢。

Answer 1

在SSLv2_client_method()版本4中，transitions now take an optional parameter另一个可用于同步元素间转换的转换。从这个文档这里是一个例子：

d3

另一种方法是创建一个自定义补间函数，该函数将在单个转换中执行两个动画：

<!DOCTYPE html>
<html>

  <head>
    <script data-require="d3@4.0.0" data-semver="4.0.0" src="https://d3js.org/d3.v4.min.js"></script>
  </head>

  <body>
    <script>
  
    var svg = d3.select('body')
      .append('svg')
      .attr('width',600)
      .attr('height',500);
      
    svg.append('circle')
      .attr('class', 'apple')
      .attr('r', 200)
      .attr('cx', 200)
      .attr('cy', 250)
      .style('fill', 'black');
      
    svg.append('circle')
      .attr('class', 'orange')
      .attr('r', 200)
      .attr('cx', 400)
      .attr('cy', 250)
      .style('fill', 'black');
  
    var t = d3.transition()
      .duration(7000)
      .ease(d3.easeLinear);

    d3.selectAll(".apple").transition(t)
      .style("fill", "red");

    d3.selectAll(".orange").transition(t)
      .style("fill", "orange");
  </script>
  </body>

</html>

D3过渡 - 在整个过渡期间进行变更

1 个答案: