javascript - 通过更新变量更新 D3 图表的大小

Question

首先，这个:Resize svg when window is resized in d3.js不是我要找的。

我的图形宽度定义为以下几个函数:

var element = document.getElementById('front'),
    style = window.getComputedStyle(element),
    divWidth = parseInt(style.getPropertyValue('width'), 10),
    divHeight = parseInt(style.getPropertyValue('height'), 10);
window.onresize = function() {
    divWidth = parseInt(style.getPropertyValue('width'), 10),
    divHeight = parseInt(style.getPropertyValue('height'), 10);
};

var margin = {top: 20, right: 40, bottom: 90, left: 40},
width = divWidth - margin.left - margin.right,
height = divHeight - margin.top - margin.bottom;

生成页面时效果很好。如您所见，变量会随着屏幕的移动而动态更新。我想知道的是如何在重新分配变量的同时更新图表的宽度。

元素的链接和来源:Cards

Plunker

---

阅读更多内容后的另一个问题:替代 window.resize 的最佳方法是什么？用 div 代替窗口。

编辑:找到了一个很棒的 div 调整大小工具:http://www.backalleycoder.com/2013/03/18/cross-browser-event-based-element-resize-detection/

Answer 1

使用 polling technique ，您可以通过以下方式解决问题:

addResizeListener(target, function()
{
    var style = window.getComputedStyle(target);

    divWidth = parseInt(style.getPropertyValue('width'), 10);
    divHeight = parseInt(style.getPropertyValue('height'), 10);

    width = divWidth - margin.left - margin.right;
    height = divHeight - margin.top - margin.bottom;

    document.getElementById('front').innerHTML = '<span style="font-size: 40px; font-family:icons; cursor:pointer" id="flip" onclick="flipper(\'flipper\')"></span>';

    makeTestGraph();
    makeSliderGraph();
});

Working plunker .