attrTween函数不被调用

我正在通过d3.svg.arc函数创建“band”。我知道.transition()没有很好的圆弧默认插补器，所以我使用attrTween来定义我自己的。这里是我的代码的相关部分：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永远新的带进来。

它实际上做一个体面的工作，减去错误和缺乏日志，但我宁愿没有在浏览器中堆积的错误。任何帮助将不胜感激！

来源

2016-01-27 AndyPerlitch

您在同一个属性上同时调用'.attrTween（）'和'.attr（）'。你不需要'.attr（）'，我认为这种情况下取消了转换。 –

谢谢@LarsKotthoff！让它成为答案，我会标记它是正确的 – AndyPerlitch

的问题是，你初始化后立即重写转变：

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

通过设置直接的d值，您已停用的同一属性的转变。要解决问题，只需拨打.attr("d", ...)即可。

来源

2016-01-28 17:45:20

attrTween函数不被调用

回答

相关问题