Question

我试图像这样做一个补间路径：https://bl.ocks.org/mbostock/3916621

问题：路径正在改变方向。灰色路径从左向右变化，白色路径从下向上变化。这不是预期的转变！

编辑：我预期的转变应该是一个简单的成长过渡。所以小的应该成长为更大的。

const PATHS = {
  FULL: {
    GRAY: 'M1035,429l-4.6-73.7L1092,223l-66,1l-66.3-36.4l-102.5,67.6L623.8,0L467.4,302.1l-218.7-82.9L77.6,317.4L0,214.5V429H1035z',
    WHITE: 'M0,429V292l249.4-72.9l135.4,56.6L623.8,0L824,232.5l135.7-44.9l26.7,190.5l29.3,16.8l19.3,34H0z'
  },
  SMALL: {
    GRAY: 'M0,429h834l-134.2-34.6l-37,23.2l-130.6-35.2l-112.7,33.5l-144.2-67l-96.7,65.2L43.5,377.5L0,391.4V429z',
    WHITE: 'M0,429h834l-134.2-34.6l-83.5,29l-84.1-41l-126.9,31.2l-130-64.7l-144.8,58.6l-87-30L0,386.1V429z'
  }
};

const pathTween = (d1, precision) => {
  return function() {
    const path0 = this;
    const path1 = path0.cloneNode();
    const n0 = path0.getTotalLength();
    const n1 = (path1.setAttribute('d', d1), path1).getTotalLength();

    const distances = [0];
    const dt = precision / Math.max(n0, n1);
    let i = 0;

    while ((i += dt) < 1) distances.push(i);
    distances.push(1);

    const points = distances.map(t => {
      const p0 = path0.getPointAtLength(t * n0);
      const p1 = path1.getPointAtLength(t * n1);

      return d3.interpolate([p0.x, p0.y], [p1.x, p1.y]);
    });

    return t => {
      return t < 1 ? 'M' + points.map(p => p(t)).join('L') : d1;
    };
  };
};

 const pathTransition = (path, d1) => {
    path.transition()
      .duration(10000)
      .attrTween('d', pathTween(d1, 4));
  }

var svg = d3.select('svg');

svg.append('path')
      .attr('class', 'white-mountain')
      .attr('d', PATHS.SMALL.WHITE)
      .call(pathTransition, PATHS.FULL.WHITE);

svg.append('path')
      .attr('class', 'gray-mountain')
      .attr('d', PATHS.SMALL.GRAY)
      .call(pathTransition, PATHS.FULL.GRAY);

我怎样才能使这个工作？

D3路径补间改变方

0 个答案: