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窗口大小变化时的自动尺寸图

回答

相关问题