D3JS：滾動時向下調整圖表大小

Question

我有這段代碼，可以使圖表響應所有屏幕尺寸和尺寸。 問題在於，移動瀏覽器在向下滾動時會隱藏“網址”欄，而在向上滾動時（到達頂部時）會顯示該網址欄，從而使屏幕的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;'>&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"> 

非常感謝。

Answer 1

添加"scroll"事件處理程序，並像多個"resize"事件檢測一樣，確定是否有滾動事件接近調整大小事件並取消調整大小。 這取決於誰先被觸發。