如何刪除NVD3圖表調整大小/更新延遲

我創建了一個NVD3 multiBarChart並將其放置在一個jQuery可調整大小的容器中。在調整圖表大小時，每個呈現的延遲時間與圖表第一次繪製時相同：交錯左右延遲繪製條形圖。當圖表第一次繪製時，這看起來很酷，但是在調整圖表的大小時，這是很麻煩的。我已經用nv.d3.css進行了試驗，每次延遲都減少到0ms，但無濟於事。還沒有檢查過NVD3 JS，我希望不需要。如何刪除NVD3圖表調整大小/更新延遲

小提琴： http://jsfiddle.net/a5Fnj/10/

var container = $("#mycontainer"); 
$(container[0]).resizable(); 
var svg = d3.select(container[0]).append("svg"); 

nv.addGraph(function() { 
    var chart = nv.models.multiBarChart(); 

    chart.xAxis.tickFormat(d3.format(',f')); 
    chart.yAxis.tickFormat(d3.format(',.1f')); 

    d3.select(container[0]).select("svg") 
     .datum(exampleData()) 
     .transition().duration(0).call(chart); 

    nv.utils.windowResize(chart.update); 

    this.stackedbar = chart; 
}); 

function exampleData() { 
    return stream_layers(3, 10 + Math.random() * 100, .1).map(function (data, i) { 
     return { 
      key: 'Stream' + i, 
      values: data 
     }; 
    }); 
}

來源

2014-01-11 pmont

-1

在最新版本（從github），您可以設置.transitionDuration()：

chart.transitionDuration(0);

編輯：即便如此，一些轉換/持續時間是硬編碼在NVD3來源。擺脫這些的唯一方法是修改源代碼。

來源

2014-01-11 21:02:24

我抓住了最新nv.d3.min.js從你的鏈接，並添加chart.transitionDuration（0）。 yAxis電話。調整大小會延遲渲染。 – pmont

對，它看起來像只控制部分轉換。其餘的是硬編碼恐怕所以你必須修改源代碼。 –

我遇到同樣的問題。如果我能找到需要改變的適當行，我會很好地處理源代碼。 @LarsKotthoff你能給個提示嗎？我不想開始替換所有.transition（調用過渡（1），直到它工作： -/ – Locked

我使用了transitionDuration：-1，它爲stackedAreaChart工作。

編輯

這有助於附加圖表數據刪除時的過渡，而不是重新大小問題，請檢查下面的評論。

來源

2014-12-28 19:36:47 jhertz

我已經嘗試過，並在-1中傳遞幾個不同的傳遞變量。調整jQuery容器的大小繼續導致緩慢的重繪。這是一個更新的小提琴： http://jsfiddle.net/a5Fnj/10/ – pmont

我的答案應該更具體一些，在將數據附加到圖表時重新繪製時出現問題，而不是重新調整大小。我認爲值得檢查一下它也解決了你的問題，但是看起來你已經走到了那條路上，沒有運氣。 – jhertz

這可能不是你以後的解決方案，但是你是否嘗試過延遲更新直到重新設置大小？像這樣：http://jsfiddle.net/qL5vyr39/ – jhertz

由於NVD3 1.7.1可以使用持續時間選項：圖表後直接

chart.duration(0);

來源

2015-03-05 16:29:53 jheminghous

謝謝你的擡頭。我更新了小提琴，它似乎工作。調整大小被打破，但點擊堆積/分組和流選擇，使其立即繪製，而不是通過動畫。 http://jsfiddle.net/a5Fnj/12/ – pmont

後續：該小提琴使用1.7.0，因爲CDN沒有1.7.1 – pmont

如何刪除NVD3圖表調整大小/更新延遲

回答

相關問題