我使用d3js来创建图表,它使用SVG。在www.uscfstats.com/deltas查看它(使用12842311作为输入值;现在它非常复杂)。
在Chrome、Safari和Firefox10上,这像预期的那样呈现了一个完整的图表,占据了整个白框。然而,在更高版本的Firefox中,SVG的顶部200个左右的px呈现(具体地说是15个),然后其余的就被切断了。
当我在Firebug中打开页面时,我可以突出显示HTML元素,它们似乎都在那里,就像一个大白框覆盖了我图表底部75%的部分(虽然没有这样的HTML元素)。我在点上有点击事件,呈现的点上我可以点击,但我找不到的点,但点击它们什么也不做。
我解决了这个问题,写道
var svg = d3.select("#scatterplot").append("svg").attr("width", "100%").attr("height", "100%");
为什么会这样?发生了什么?
发布于 2012-10-11 12:32:15
实际情况是,svg大小调整的规范得到了澄清,因此它在各种情况下都能更好地工作,Firefox也进行了更新,以跟踪更新的规范。特别是,<svg>
现在的大小与其他CSS替换的元素相同,而不是尝试在各种情况下失败的自动魔术。
特别值得一提的是,缺少宽度和高度属性被视为等同于将这两个属性都设置为100%,除了在CSS中实际设置宽度或高度并不是很好,而且还有其他一些问题。因此,现在的行为是,如果您设置了宽度和高度,这些内容将被视为表示提示(就像<img>
的宽度和高度属性一样),如果不这样做,您将获得默认的300x150固有大小,然后可以根据需要使用样式规则覆盖该大小。
发布于 2013-05-29 17:10:46
我也面临着同样的问题
.attr("width", window.innerWidth).attr("height",window.innerHeight)
对我很管用。
发布于 2014-12-17 23:39:33
在火狐中,你需要定义你正在使用的单元: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');
https://stackoverflow.com/questions/12830897
复制相似问题