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函數不被調用

回答

相關問題