javascript - 2dimple.js/d3.js 窗口大小变化时自动调整大小图表

Question

我有以下使用 dimple.js 绘制图表的代码:http://jsbin.com/zacus/17/调整浏览器窗口大小时(或调整 jsbin Pane 大小时)，我希望图表也调整大小以适合其表单元格父级。正如您从示例中看到的那样，这不会发生。我曾尝试编写一个事件处理程序来更改图表的宽度或在图表出现时重新绘制图表，但无济于事。

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");

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