Question

我正在创作＆＃34;乐队＆＃34;通过d3.svg.arc函数。我知道.transition()对于弧没有很好的默认插值器，所以我使用attrTween定义了自己的默认插值器。这是我的代码的相关部分：

var bandArc = d3.svg.arc()
  .innerRadius(radius)
  .outerRadius(radius + 20)
  .padAngle(0.03)
  .cornerRadius(2)
  .startAngle(function(d) { return Math.PI - d.radians[0]; })
  .endAngle(function(d) { return Math.PI - d.radians[1]; });

var bands = nodeGroup.selectAll('path.band')
  .data(bands, getBandKey);

// Old bands
bands.exit().call(fadeOut);

// Current bands
bands
  .transition()
  .attrTween('d', function(d) {
    var i = d3.interpolate(this._current, d);
    this._current = i(0);
    return function(t) {
      console.log('BLAH');
      return bandArc(i(t));
    };
  })
  .attr('d', bandArc);

// New bands
bands.enter()
  .append('path')
  .classed('band', true)
  .attr('d', bandArc)
  .attr('fill', function(d) {
    return d.color;
  });

问题1是我从未看到日志语句（console.log('BLAH');）。

问题2是当有新的乐队时，我会收到Error: Invalid value for <path> attribute d错误，因为新的乐队会进来。

它实际上做得不错，减去错误和缺少日志记录，但我宁愿没有在浏览器中堆积错误。任何帮助将不胜感激！

Answer 1

问题是你在初始化之后立即覆盖过渡：

.transition()
.attrTween('d', function(d) { ... })
.attr('d', ...)

通过直接设置d的值，您将禁用相同属性的转换。要解决此问题，只需删除对.attr("d", ...)的调用。

attrTween函数未被调用

1 个答案: