SVG呈现但仅在Firefox中被切断 - 为什么?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (71)

我正在使用使用SVG的d3js来创建图表。在www.uscfstats.com/deltas上查看(使用12842311作为输入值;现在它被非常黑客攻击)。

在Chrome,Safari和Firefox 10上,这会按预期呈现完整的图表,占据了整个白框。然而,在Firefox的更高版本中(具体地说,15)SVG的前200个左右的px渲染,但其余部分被切断。

当我在Firebug中打开页面时,我可以突出显示HTML元素,看起来它们就在那里,就好像一些大的白盒子覆盖了我图表的底部75%(没有任何这样的HTML但是,元素。我点击点上的事件,以及我可以点击的渲染的那些事件,但是那些我找不到但点击它们的事件什么也没做。

我通过写作解决了这个问题

var svg = d3.select("#scatterplot").append("svg").attr("width", "100%").attr("height", "100%");

为什么这样做,发生了什么?

提问于
用户回答回答于

我也面临同样的问题

.attr("width", window.innerWidth).attr("height",window.innerHeight)

为我工作。

用户回答回答于

在Firefox中,你需要定义你所使用的单位:px%

因此以下对我不起作用:

var width = 800,
    height = 600;

var el = d3.select('#d3_element')
    .style('width', width)
    .style('height', height);

但以下确实有效:

var el = d3.select('#d3_element')
    .style('width', width + 'px')
    .style('height', height + 'px');

扫码关注云+社区

领取腾讯云代金券