Question

我必须应用两个很长的链式转换序列，它们主要在转换顺序上有所不同，并且我正在寻找一种紧凑的编码方式。

作为一个玩具示例，请考虑以下顺序：a，b，c，d，e，{{1 }}，f，g和h，e，f，g，h，a ，b，c。我已经尝试使用下面的代码，但是它不起作用。请注意，过渡可能具有不同的属性（d，delay，duration等），并且它们可以应用于不同的属性（ease，x ，y，width或height，cx，cy等）和样式。例如，过渡r可以指代a，过渡width到b，过渡height到c，过渡x到d，将y过渡到e属性，将transform过渡到f样式，等等。

P.S .：这个问题的目的与我的previous相同，但是在这里我使用了一个过于简单的编码案例，却误导了答案。

有没有办法以紧凑的方式编写代码？

color

Answer 1

如评论中所述，回答此问题的原理与您先前的问题相同。在这种情况下，您会有一组不同的过渡，它们可能以不同键引用的任何顺序应用。让我们将它们存储在一个对象中：

var transitions = {
  a: function(sel){ return sel.transition().duration(1000).delay(1000).attr('cy', 200) },
  b: function(sel){ return sel.transition().duration(2000).delay(0).attr('r', 40) },
  c: function(sel){ return sel.transition().duration(500).delay(1500).attr('fill', 'red') },
  d: function(sel){ return sel.transition().duration(1500).delay(500).attr('opacity', 0.5) },
  e: function(sel){ return sel.transition().duration(1000).delay(3000).attr('cy', 300) },
  f: function(sel){ return sel.transition().duration(2000).delay(0).attr('r', 60) },
  g: function(sel){ return sel.transition().duration(500).delay(1500).attr('fill', 'magenta') },
  h: function(sel){ return sel.transition().duration(1500).delay(500).attr('opacity', 0.25) }
};

每个函数都有一个d3.selection对象，并对其应用特定的转换参数和转换集。这些功能可能会很长而且很复杂。我很懒惰，几乎没有想象力，所以他们在这个版本中只做一次转换。

这里已经有一些代码重复，因此让我们将选择内容转换为过渡内容，并使用this而不是传递参数：

var transitions = {
  a: function(){ return this.duration(1000).delay(1000).attr('cy', 200) },
  b: function(){ return this.duration(2000).delay(0).attr('r', 40) },
  c: function(){ return this.duration(500).delay(1500).attr('fill', 'red') },
  d: function(){ return this.duration(1500).delay(500).attr('opacity', 0.5) },
  e: function(){ return this.duration(1000).delay(3000).attr('cy', 300) },
  f: function(){ return this.duration(2000).delay(0).attr('r', 60) },
  g: function(){ return this.duration(500).delay(1500).attr('fill', 'magenta') },
  h: function(){ return this.duration(1500).delay(500).attr('opacity', 0.25) }
};

现在我们可以通过调用类似的代码来执行这些转换

transitions['a'].call( selection.transition() )
transitions.f.call( d3.select('circle').transition() )

您想指定一个过渡数组以应用于选择，类似这样：

apply_transitions( group.select(":nth-child(1)"), ['a','b','c','d'] );
apply_transitions( group.select(":nth-child(2)"), ['e','f','g','h'] );

这可以实现如下：

/**
* apply a series of transitions to a selection
*
* @param selection - d3 selection
* @param tr_arr - array of transition identifiers, referring to functions in the `transitions` object
*/
function apply_transitions( selection, tr_arr ) {

  // turn the current selection into a d3.transition
  // call the transition function referred to by the first ID in the array
  // with the d3.transition as the `this` context
  // note that the function returns a transition object, so it can be chained
  transitions[ tr_arr[0] ].call( selection.transition() )
  // add a handler to be applied at the end of the transition
    .on('end', function(){
      // if there are more transitions to be applied, call
      // apply_transitions again with tr_arr minus the first element
      // note that the `this` context in the `on` function is a DOM element,
      // so use `d3.select(this)` to turn it into a d3 selection
      if ( tr_arr.length > 1 ) {
        apply_transitions( d3.select(this), tr_arr.slice(1) );
      }
    })
}

实况示例：

    var svg = d3.select('svg').attr('width', 500).attr('height', 500);

    var dataSet = [20, 20];

    var group=svg.append("g");
    var circles = group.selectAll('circle')
    .data(dataSet)
    .enter()
    .append('circle')
    .attr("r",function(d){ return d })
    .attr("cx",function(d, i){ return i * 100 + 50 })
    .attr("cy",50)
    .attr("fill",'black');

    apply_transitions( group.select(":nth-child(1)"), ['a','b','c','d'] );

    apply_transitions( group.select(":nth-child(2)"), ['e','f','g','h'] );

  function apply_transitions( selection, tr_arr ) {

    var transitions = {
      a: function(){ return this.duration(1000).delay(1000).attr('cy', 200) },
      b: function(){ return this.duration(2000).delay(0).attr('r', 40) },
      c: function(){ return this.duration(500).delay(1500).attr('fill', 'red') },
      d: function(){ return this.duration(1500).delay(500).attr('opacity', 0.5) },
      e: function(){ return this.duration(1000).delay(3000).attr('cy', 300) },
      f: function(){ return this.duration(2000).delay(0).attr('r', 60) },
      g: function(){ return this.duration(500).delay(1500).attr('fill', 'magenta') },
      h: function(){ return this.duration(1500).delay(500).attr('opacity', 0.25) }
    };

      transitions[ tr_arr[0] ].call( selection.transition() )
        .on('end', function(){
          if ( tr_arr.length > 1 ) {
            apply_transitions( d3.select(this), tr_arr.slice(1) );
          }
        })
  }

<script src="http://d3js.org/d3.v5.js"></script>
<svg></svg>

如何在D3中重用两个（或更多）链接转换序列

1 个答案: