我有这段代码，可以使图表响应所有屏幕尺寸和尺寸。问题在于，移动浏览器在向下滚动时会隐藏“网址”栏，而在向上滚动时（到达顶部时）会显示该网址栏，从而使屏幕的height变小或变大
这会导致resize function每次触发浏览器尺寸更改时都会调整图表大小，这是不希望的行为。您能帮我找出解决方法吗？我无法放弃调整大小功能，因为图表无法响应，而且我也不知道如何处理隐藏和显示的URL字段。
我要离开此运行摘要，以便您可以查看发生了什么。
好想你
$(window).on('resize', function (event) {
$("#chart").width(window.innerWidth * 0.9);
$("#chart").height(window.innerHeight);
});
$("#chart").width(window.innerWidth * 0.9);
$("#chart").height(window.innerHeight );
function horizontalGroupBarChart(config) {
function setReSizeEvent(data) {
var resizeTimer;
var interval = 500;
window.removeEventListener('resize', function () {
});
window.addEventListener('resize', function (event) {
if (resizeTimer !== false) {
clearTimeout(resizeTimer);
}
resizeTimer = setTimeout(function () {
$(data.mainDiv).empty();
drawHorizontalGroupBarChartChart(data);
clearTimeout(resizeTimer);
}, interval);
});
}
drawHorizontalGroupBarChartChart(config);
setReSizeEvent(config);
}
function createhorizontalGroupBarChartLegend(mainDiv, columnsInfo, colorRange) {
var z = d3.scaleOrdinal()
.range(colorRange);
var mainDivName = mainDiv.substr(1, mainDiv.length);
$(mainDiv).before("<div id='Legend_" + mainDivName + "' class='pmd-card-body' style='margin-top:0; margin-bottom:0;text-align:center'></div>");
var keys = Object.keys(columnsInfo);
keys.forEach(function (d) {
var cloloCode = z(d);
$("#Legend_" + mainDivName).append("<span class='team-graph team1' style='display: inline-block; margin-right:10px;'>\
<span style='background:" + cloloCode + ";width: 10px;height: 10px;display: inline-block;vertical-align: middle;'> </span>\
<span style='padding-top: 0;font-family:Source Sans Pro, sans-serif;font-size: 13px;display: inline;'>" + columnsInfo[d] + " </span>\
</span>");
});
}
function drawHorizontalGroupBarChartChart(config) {
var data = config.data;
var columnsInfo = config.columnsInfo;
var xAxis = config.xAxis;
var yAxis = config.yAxis;
var colorRange = config.colorRange;
var mainDiv = config.mainDiv;
var mainDivName = mainDiv.substr(1, mainDiv.length);
var label = config.label;
var requireLegend = config.requireLegend;
d3.select(mainDiv).append("svg").attr("width", $(mainDiv).width()).attr("height", $(mainDiv).height() * 1.2).attr("class","mainSVG")
var svg = d3.select(mainDiv + " svg"),
margin = { top: 20, right: 20, bottom: 40, left: 40 },
width = +svg.attr("width") - margin.left - margin.right,
height = +svg.attr("height") - margin.top - margin.bottom;
var g = svg.append("g").attr("transform", "translate(" +( margin.left*2.3) + "," + margin.top + ")");
if (requireLegend != null && requireLegend != undefined && requireLegend != false) {
$("#Legend_" + mainDivName).remove();
createhorizontalGroupBarChartLegend(mainDiv, columnsInfo, colorRange);
}
$(".mainSVG").attr("transform","translate(5,10)")
var y0 = d3.scaleBand()
.rangeRound([height, 0])
.paddingInner(0.2);
var y1 = d3.scaleBand()
.padding(0.05);
var x = d3.scaleLinear()
.rangeRound([0, width - margin.left ]);
var z = d3.scaleOrdinal()
.range(colorRange);
var keys = Object.keys(columnsInfo);
y0.domain(data.map(function (d) {
return d[yAxis];
}));
y1.domain(keys).rangeRound([0, y0.bandwidth()]);
x.domain([0, d3.max(data, function (d) {
return d3.max(keys, function (key) {
return d[key];
});
})]).nice();
var maxTicks = d3.max(data, function (d) {
return d3.max(keys, function (key) {
return d[key];
});
});
var element = g.append("g")
.selectAll("g")
.data(data)
.enter().append("g")
.attr("transform", function (d) {
return "translate(0," + y0(d[yAxis]) + ")";
});
var rect = element.selectAll("rect")
.data(function (d, i) {
return keys.map(function (key) {
return { key: key, value: d[key], index: key + "_" + i + "_" + d[yAxis] };
});
})
.enter().append("rect")
.attr("y", function (d) {
return y1(d.key);
})
.attr("width", function (d) {
return x(d.value);
})
.attr("data-index", function (d, i) {
return d.index;
})
.attr("height", y1.bandwidth())
.attr("fill", function (d) {
return z(d.key);
})
element.append('text')
.attr('x', d => x(d.num) - 2)
.attr('y', y1.bandwidth()/2)
.attr("class","percentages")
.attr('dy', '0.50em')
.attr('text-anchor', 'end')
.text(d => d.num + "%")
var datax = [0,1,2,3,4,5,6,7,8,9,10,11,12];
var tScale= d3.scaleLinear()
.rangeRound([0, width - margin.left ]);
tScale.domain(d3.extent(datax)).nice();
//CBT:add tooltips
g.append("g")
.attr("class", "axis")
.attr("transform", "translate(0," + height + ")")
.call(d3.axisBottom(x).ticks(maxTicks))
.append("text")
.attr("x", width / 2)
.attr("y", margin.bottom * 0.7)
.attr("dx", "0.32em")
.attr("fill", "#000")
.attr("font-weight", "bold")
.attr("text-anchor", "start")
g.append("g")
.attr("class", "axis")
.call(d3.axisLeft(y0).ticks(null, "s"))
.append("text")
.attr("x", height * 0.4 * -1)
.attr("y", margin.left * 0.8 * -1)//y(y.ticks().pop()) + 0.5)
.attr("dy", "0.71em")
.attr("fill", "#00338D")
.attr("font-weight", "bold")
// .attr("text-anchor", "start")
}
var helpers = {
getDimensions: function (id) {
var el = document.getElementById(id);
var w = 0, h = 0;
if (el) {
var dimensions = el.getBBox();
w = dimensions.width;
h = dimensions.height;
} else {
console.log("error: getDimensions() " + id + " not found.");
}
return { w: w, h: h };
}
}
var horBarTooltip = {
addTooltips: function (pie) {
var keys = pie.keys;
// group the label groups (label, percentage, value) into a single element for simpler positioning
var element = pie.svg.append("g")
.selectAll("g")
.data(pie.data)
.enter().append("g")
.attr("class", function (d, i) {
return pie.cssPrefix + "tooltips" + "_" + i
});
tooltips = element.selectAll("g")
.data(function (d, i) {
return keys.map(function (key) {
return { key: key, value: d[key], index: key + "_" + i + "_" + d[pie.yAxis] };
});
})
.enter()
.append("g")
.attr("class", pie.cssPrefix + "tooltip")
.attr("id", function (d, i) {
return pie.cssPrefix + "tooltip" + d.index;
})
.style("opacity", 0)
.append("rect")
.attr("rx", 2)
.attr("ry", 2)
.attr("x", -2)
.attr("opacity", 0.71)
.style("fill", "#000000");
element.selectAll("g")
.data(function (d, i) {
return keys.map(function (key) {
return { key: key, value: d[key], index: key + "_" + i + "_" + d[pie.yAxis] };
});
})
.append("text")
.attr("fill", function (d) {
return "#efefef"
})
.style("font-size", function (d) {
return 10;
})
.style("font-family", function (d) {
return "arial";
})
.text(function (d, i) {
var caption = "" + pie.label.xAxis + ":{value}";
return horBarTooltip.replacePlaceholders(pie, caption, i, {
value: d.value,
});
});
element.selectAll("g rect")
.attr("width", function (d, i) {
var dims = helpers.getDimensions(pie.cssPrefix + "tooltip" + d.index);
return dims.w + (2 * 4);
})
.attr("height", function (d, i) {
var dims = helpers.getDimensions(pie.cssPrefix + "tooltip" + d.index);
return dims.h + (2 * 4);
})
.attr("y", function (d, i) {
var dims = helpers.getDimensions(pie.cssPrefix + "tooltip" + d.index);
return -(dims.h / 2) + 1;
});
},
};
var groupChartData = [{ "num": 1, "over": "Singapore" }, { "num": 1, "over": "The Netherlands" }, { "num": 2, "over": "United Kingdom" }, { "num": 2.4, "over": "United States"}, { "num": 2.6, "over": "New Zealand" }, { "num": 2.8, "over": "Sweden" }, { "num": 3, "over": "Canada"}, { "num": 3, "over": "UAE" }, { "num": 4, "over": "Australia" }, { "num": 4.4, "over": "France" },{ "num": 5, "over": "South Korea" },{ "num": 5.2, "over": "Germany" },{ "num": 5.5, "over": "Austria" },{ "num": 6, "over": "Austria" },{ "num": 7, "over": "Brazil" },{ "num": 7, "over": "China" },{ "num": 8, "over": "Japan" },{ "num": 10, "over": "Russia" },{ "num": 11, "over": "Mexico" },{ "num": 12, "over": "India" },];
var columnsInfo = { "num": "<span style='fill:#00338D' class='mainTitle KPMGWeb-ExtraLight'>Technology & innovation pillar: Score by country</span>" };
$("#chart").empty();
var barChartConfig = {
mainDiv: "#chart",
colorRange: ["#0091DA", "#6D2077"],
data: groupChartData,
columnsInfo: columnsInfo,
xAxis: "runs",
yAxis: "over",
label: {
xAxis: "",
yAxis: ""
},
requireLegend: true
};
$("svg").children().eq(1).remove()
var groupChart = new horizontalGroupBarChart(barChartConfig); .mainTitle, .KPMGWeb-ExtraLight{
fill:#00338D!important;
}
.mainTitle{
font-size: 2em;
position: relative;
top: 2.8%;
left: 4%;
fill:#00338D!important;
}
@media screen and (min-width: 375px) {
.percentages{
fill: #fff!important;
font-size: 11px!important;
}
.mainTitle{
font-size: 2em!important;
fill:#00338D!important;
}
}
::-webkit-scrollbar {
-webkit-appearance: none;
}
::-webkit-scrollbar:vertical {
width: 12px;
}
::-webkit-scrollbar:horizontal {
height: 12px;
}
::-webkit-scrollbar-thumb {
background-color: rgba(0, 0, 0, .5);
border-radius: 10px;
border: 2px solid #ffffff;
}
::-webkit-scrollbar-track {
border-radius: 10px;
background-color: #ffffff;
}
html{
margin:0;
padding:0;
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
}
body{
margin:0;
padding:0;
}
#chart{
margin-top: -7px;
}
svg{
transform: translate(5px, 20px);
}
#Legend_chart{
position: relative;
fill:#00338D!important;
top: 2.8%;
}
@media screen and (min-width:600px){
#Legend_chart{
top: 18px;
fill:#00338D!important;
}
}
text[text-anchor="end"]{
fill:#FFF!important;
font-size: 12px;
font-weight: bold;
}
text{
font-family: arial!important;
} <script src="https://code.jquery.com/jquery-latest.min.js"></script>
<script src="https://d3js.org/d3.v4.min.js"></script>
<div id="chart" style="width: 800;height: auto">
非常感谢您。
答案 0 :(得分：0)
添加一个"scroll"事件处理程序，并像多个"resize"事件检测一样，确定是否有滚动事件接近调整大小事件并取消调整大小。这取决于谁先被触发。