使D3图响应Windows大小

时间:2016-06-14 08:18:37

标签: javascript d3.js svg responsive

我正在构建一个基于带有svg和groups的json-File的d3 Graph:

Presentation.prototype.drawGraph = function() {
var _this;
this.margin = {
  top: 0,
  right: 0,
  bottom: 0,
  left: 0
};
this.width = 1000 - this.margin.left - this.margin.right;
this.height = 720 - this.margin.top - this.margin.bottom;
this.singleWidth = 50;
this.singleHeight = 32;
_this = this;
return d3.json("result.json", (function(_this) {
return function(err, json) {
    if (err) {
        console.error(err);
        return;
    }
// do something with the data
_this.x = d3.scale.ordinal().rangeBands([0, _this.width], 0, 0);
    _this.y = d3.scale.linear().range([_this.height, 0]);
    _this.svg = d3.select("#graph").append("svg").attr("width", _this.width + _this.margin.right + _this.margin.left).attr("height", _this.height + _this.margin.top + _this.margin.bottom).append("g").attr("transform", "translate(" + 0 + "," + 50 + ")");
    _this.svg.append("rect").attr("x", -200).attr("y", -200).attr("width", 1200).attr("height", 1200).attr("fill", "#FFFFFF").on("click", function(data, index) {
        _this.removeRenderedContent();
        return _this.clickOnBackgroundRect();
    });
    _this.groups = _this.svg.selectAll("g").data(json).enter().append("g").attr("class", function(data, index) {return "group-case " + data.type;});
    _this.groups.on("click", function(data, index) {
        _this.removeRenderedContent();
        _this.clickOnGroupCaseRect(data, index, this);
        return false;
    });
    _this.groups.attr("transform", function(data, index) {
        return "translate(" + data.x + "," + data.y + ")";
    });
    _this.groups.append("rect").attr("width", _this.widthFilter).attr("height", _this.heightFilter).attr("x", 0).attr("y", 0).attr("rx", 10).attr("ry", 10);
    _this.groups.append("g").append("text").attr("y", 7).attr("x", 7).text(function(data) {return data.title;}).call(function(data, xpadding) {return _this.wrapGroup(data, xpadding);}, 7);

    _this = _this;
    return _this.groups.append("g").each(function(data, index) {
        return _this.drawChildren(this, data, index);
    });
};
})(this));
};

我想要做的是使该图响应当前的浏览器窗口大小。有谁知道最简单的方法吗?

提前致谢。

0 个答案:

没有答案