Диаграмма размера размера 2dimple.js/d3.js при изменении размера окна

Question

У меня есть следующий код, который рисует диаграмму, используя dimple.js: http://jsbin.com/zacus/17/ Когда размер окна браузера изменяется (или изменяется размер окна jsbin), я хочу, чтобы диаграмму, чтобы изменить размер, чтобы соответствовать его родительскому элементу таблицы. Как видно из примера, этого не происходит. Я попытался написать обработчик события, чтобы изменить ширину диаграммы или перерисовать диаграмму, когда она есть, но безрезультатно.

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

Любые предложения о том, как это сделать?

EDIT: эксперимент немного привел меня к следующему коду, который, кажется, решает мою проблему. Это лучший способ добиться этого?

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

Answer 1

Я не пробовал его с помощью viewBox, так что если это работает, это звучит неплохо. Я делаю это, используя 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