2dimple.js/d3.js窗口大小變化時的自動尺寸圖

我有以下代碼，使用dimple.js繪製圖表：http://jsbin.com/zacus/17/ 當瀏覽器窗口調整大小（或jsbin窗格調整大小）時，我希望圖表也調整大小以適應表格單元格父項。從示例中可以看出，這不會發生。我試圖編寫一個事件處理程序來更改圖表的寬度或重繪圖表時，但無濟於事。2dimple.js/d3.js窗口大小變化時的自動尺寸圖

window.onresize= function redraw(){ 
    chart1.setBounds(70, 30, pTd.offsetWidth-150, 300); 
    myLegend1.left = chart1.width + 100; 
}

有關如何完成此任務的任何建議？

編輯：實驗有點讓我看到下面的代碼似乎解決了我的問題。這是完成這個最好的方法嗎？

chart1.svg.attr("width", "100%") 
    .attr("height", "100%") 
    .attr("viewBox", "0 0 600 400");

來源

2014-09-24 mike01010

http://stackoverflow.com/questions/9400615/whats-the-best-way-to-make-a-d3- js-visualization-layout-responsive – 2014-09-24 08:26:42

所以如果這是它的工作我還沒有試過視框聽起來很好的解決方案。我使用setMargins來計算圖表的比例，並在調整大小時調用chart.draw。這具有使用凹坑大小邏輯的好處 - 例如當圖表變得太小時旋轉x軸標籤。

下面是從網站的例子：

// Set up a standard chart 
var myChart; 
d3.tsv("/data/example_data.tsv", function (data) { 
    myChart = new dimple.chart(svg, data); 

    // Fix the margins 
    myChart.setMargins("60px", "30px", "110px", "70px"); 

    // Continue to set up a standard chart 
    myChart.addCategoryAxis("x", "Month").addOrderRule("Date"); 
    myChart.addMeasureAxis("y", "Unit Sales"); 
    myChart.addSeries("Channel", dimple.plot.bar); 

    // Set the legend using negative values to set the co-ordinate from the right 
    myChart.addLegend("-100px", "30px", "100px", "-70px"); 
    myChart.draw(); 
}); 

// Add a method to draw the chart on resize of the window 
window.onresize = function() { 
    // As of 1.1.0 the second parameter here allows you to draw 
    // without reprocessing data. This saves a lot on performance 
    // when you know the data won't have changed. 
    myChart.draw(0, true); 
};

Here it is in action

來源

2014-09-24 13:49:36

我試過這個解決方案，提到的例子是：（http://jsbin.com/zacus/17/），但是當我調整窗口大小時，圖表的大小保持不變 – mike01010 2014-09-24 17:20:43

的setBounds？您需要使用百分比大小的setBounds，或者setMargins根據SVG具有圖表大小。 – 2014-09-25 14:11:09

我試過這兩個，爲了我的生活無法弄清楚爲什麼它不會工作。我確實在寬度設置爲100％的表格中放置了我的圖表。想知道這可能與它有什麼關係。這裏是一個例子：http://jsbin.com/zacus/47/edit?html,js,output – mike01010 2014-09-26 03:56:42

2dimple.js/d3.js窗口大小變化時的自動尺寸圖

回答

相關問題