Question

我正在使用d3.js的强制布局，我想让力布局能够响应。

我使用了以下代码：

var width = 1110 ,height = 600 ;    
svg = d3.select("#d3_drawing_container").append("svg:svg")
                .attr("viewBox", "0 0 " + width + " " + height )
                .attr("overflow", "hidden")
                .append("g");

这在Firefox和chrome中完美运行，但在Internet Explorer（IE版本：11.0.9600.16428）中，svg元素没有从viewbox属性获得高度。

Answer 1

您也可以直接在height元素上设置width和<svg>。

var width = 1110 ,height = 600 ;    
svg = d3.select("#d3_drawing_container").append("svg:svg")
                .attr("width", width).attr("height", height)
                .attr("viewBox", "0 0 " + width + " " + height )
                .attr("overflow", "hidden")
                .append("g");

Answer 2

除了上述建议，您还必须添加以下CSS更改。这将设置高度和宽度以及响应性。希望这可以帮助。 #svg { 宽度：100％; }

Answer 3

但这些不是一个完美的解决方案，你必须从svg容器中删除高度和宽度........... 像这样的代码。

var width = 1110 ,height = 600 ;    
svg = d3.select("#d3_drawing_container").append("svg:svg")
                .attr("viewBox", "0 0 " + width + " " + height )
                .attr("overflow", "hidden")
                .append("g");

d3js响应力布局在IE 11中不起作用

3 个答案: