D3JS: chart resizes when scrolling and down

Question

I have this code which makes a chart to be responsive to all screen sizes and dimensions. the problem is that mobile browsers hide the 'url' bar when scrolling down and show it when scrolling up (when the top is reached), making the screen's height smaller or bigger

This causes the resize function , which resizes the chart every time the browser's dimensions change, to be triggered, and that's an unwanted behavior. Can you help me figure out how to solve this? I cant discard the resize function, because the chart wouldn't be responsive, and I have no idea how to deal with the URL field hidding and showing.

I'm leaving this running snippet so that you can see what's going.

Thak you so much.

  $(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;'>&nbsp;</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"> 

Thank you so much.

Answer 1

add a "scroll" event handler and like the multiple "resize" event detection determine if there is a scroll event close to a resize event and cancel the resize. It depends who is triggered first in sequence.