javascript - 未调用 attrTween 函数

Question

我正致力于通过 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", ...) 的调用即可。