Javascript D3.js堆叠面积图大小调整问题
我有一个使用d3.js的堆积面积图。我有一个函数,可以在window.resize上调整和重画可视化效果。逻辑是根据窗口大小去除10%的余量并缩放x/y轴 你可以在这里看到: 当我调整窗口大小(放大或缩小)时,如果窗口大小不接近全尺寸,则该逻辑起作用。如果高度接近全高,图形将溢出预期边界。例如,如果按F11键全屏显示,图形将溢出。 这不仅是F11,但如果我最大化,有时如果工作正常,其他时候它溢出 相关的js文件是 此外,相关的调整大小功能:Javascript D3.js堆叠面积图大小调整问题,javascript,svg,d3.js,resize,svg-animate,Javascript,Svg,D3.js,Resize,Svg Animate,我有一个使用d3.js的堆积面积图。我有一个函数,可以在window.resize上调整和重画可视化效果。逻辑是根据窗口大小去除10%的余量并缩放x/y轴 你可以在这里看到: 当我调整窗口大小(放大或缩小)时,如果窗口大小不接近全尺寸,则该逻辑起作用。如果高度接近全高,图形将溢出预期边界。例如,如果按F11键全屏显示,图形将溢出。 这不仅是F11,但如果我最大化,有时如果工作正常,其他时候它溢出 相关的js文件是 此外,相关的调整大小功能: function setACDimensions(
function setACDimensions() {
ac_container_width=$(window).innerWidth();
ac_container_height=Math.round(0.8*$(window).innerHeight());
$(ac_container).height(ac_container_height);
$(ac_container).width(ac_container_width);
var margin=(ac_margin > 10)? 10 : ac_margin;
var factor= 1 - 2*margin/100;
ac_width = Math.round(factor*ac_container_width);
ac_height = Math.round(factor*ac_container_height);
ac_origin_x=Math.round(ac_container_width * margin/100);
ac_origin_y=Math.round(ac_container_height * margin/100);
}
function resizeAreaGraph() {
setACDimensions();
area_vis.attr("width", ac_width)
.attr("height", ac_height)
.attr("transform", "translate(" + ac_origin_x + "," + ac_origin_y + ")");
redrawAreaGraph();
};
function redrawAreaGraph() {
if(!area_graph_exists) {
initAreaGraph();
} else {
bindAreaData();
}
if(area_graph_exists) {
area_paths.data(area_stack);
area_paths.select("path")
.transition()
.attr("d", function(d) { return area_fn(d.values); });
area_paths.select("text")
.datum(function(d) { return { name: d.name, value: d.values[d.values.length - 1]}; })
.attr("transform", function(d) {
return "translate(" + xx(d.value.year) + "," + yy(d.value.y0 + d.value.y / 2) + ")";
})
.text(function(d) { return d.name; });
area_vis.select("g .x_axis")
.attr("transform", "translate(0," + ac_height + ")")
.call(xAxis);
area_vis.select("g .y_axis").call(yAxis);
}
}
(完整的代码可以在我给上面链接的js文件中看到)。我无法让它溢出,win7上的Chrome 64Bit无法在win7上的Chrome 33、IE11或Firefox 27上复制。我怀疑这是一个broswer特有的问题,即为
innerWidth
和innerHeight
给出了不好的结果。我们说的溢油量有多大?这是滚动条宽度的差异吗?感谢您的评论和测试。我的是ubuntu上的chrome 28。我将测试它与其他版本和更新。