如何用D3.JS中的轉換更新Y域？

我必須顯示每100ms更新一次的增長折線圖。我找到一種方法，用正確的更新數據：如何用D3.JS中的轉換更新Y域？

path 
    .attr("d", line) 
    .attr("transform", null) 
    .transition() 
    .duration(100) 
    .ease("linear") 
    .attr("transform", "translate(" + x(0) + ",0)") 
    .each("end", tick);

但我有Y軸域問題。

我定義我的Y軸這樣的：

var y = d3.scale.linear() 
    .domain([-1, 1]) 
    .range([height, 0]);

，然後我更新它的每個指令刷新：

y.domain([avg - 10, avg + 10])

它的工作原理，但我有一個壞的「裁剪」的效果。

演示：https://jsfiddle.net/j499oy0e/

如何過渡或類似的東西去除呢？

來源

2015-09-24 Alex

而不是聽過渡的「結束」事件並再次調用tick（）函數，我會建議使用javascript提供的requestAnimationFrame（），這將有助於使動畫更平滑。如果你設置你打勾的功能如下：

function tick(){ 
    requestAnimationFrame(tick); 
    //...rest of the code 
}

會發生什麼事是，requestAnimationFrame將等待當前的「繪圖」調用傳遞給它的功能，這是函數本身之前完成。添加此更改並從路徑選擇中刪除'.each'後，您可能會注意到具有可變fps的動畫（取決於許多事情）。這個動畫的fps可以很容易地控制。您可以按照下列指示：Controlling fps with requestAnimationFrame?

此外，嘗試完全移除過渡，看看如果你喜歡這更好的

path 
.attr("d", line) 
.attr("transform", "translate(" + x(0) + ",0)");

希望這是你要找的！

來源

2015-09-24 16:31:58

如何用D3.JS中的轉換更新Y域？

回答

相關問題