我有这段代码,可以使图表响应所有屏幕尺寸和尺寸。 问题在于,移动浏览器在向下滚动时会隐藏“网址”栏,而在向上滚动时(到达顶部时)会显示该网址栏,从而使屏幕的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"> 

非常感谢。

#1楼 票数:0

添加"scroll"事件处理程序,并像多个"resize"事件检测一样,确定是否有滚动事件接近调整大小事件并取消调整大小。 这取决于谁先被触发。

  ask by Julio Rodriguez translate from so

未解决问题?本站智能推荐:

1回复

D3js图表响应

我正在尝试获取响应式d3js图表。 我已将图表的宽度和高度设置为100%,并具有调整大小的功能,该功能应减小size。 到目前为止,我所做的只是设法减少了x轴上的标签,但折线图仍保持相同的大小。这是我尝试使响应方式正确的方式,或者是它们的更好方式任何d3js图表(条形/饼形/线形)都可以做出
1回复

绘制图表时出现d3js错误

我试图从我的图表的数据集中解析timeStamp。 它说 尝试解析数据集时出现“ Uncaught TypeError:t.slice不是函数”。 这就是我尝试的方式 var jsonDataLoadAvg; var jsonDataFlightRequest; var jso
1回复

响应式D3js图表[重复]

这个问题已经在这里有了答案: 使d3.js可视化布局具有响应性的最佳方法是什么? 11个答案 我正在尝试使D3js图表响应,并且无法使其正常工作。 想知道你们能帮上忙。 该网站是http://www.vizualytic.com/ d3js图表位于主页上
1回复

d3JS图表无法正确渲染

给定下面的代码。 我能够创建一个由随机数据填充的条形图,并使其正确显示。 不幸的是,对我来说,我无法update图表以正确呈现。 轴似乎正在相应地更新,但是图形的条形图相对于其轴未显示在正确的位置。 下面有一个JSFiddle来说明问题。 您会注意到沿着x轴在各个位置渲染的条。
1回复

D3js图表反转问题

我的小提琴 我正在研究d3js,我得到了带有一些数据的条形图的此实现。 我需要反转图表。 我尝试添加: 并在酒吧上打电话: 没有工作.. 我该如何解决? 我认为缺少一些东西。这就是我想要的轴:
1回复

如何为图表D3JS添加缩放

我有这个DEMO ,我正尝试使用以下示例中的代码添加缩放功能: 但是我的图表无法缩放。 关于如何解决这个问题的任何想法? 谢谢!
1回复

D3JS为图表创建图例

我正在尝试为图表创建自己的图例,此刻出现了带有颜色的条,但没有显示文本。 这是我的代码: 我还尝试将x和y都更改为0,以防出现错误的定位,但是那没有用。 当我尝试使用浏览器检查元素时,我注意到它根本没有添加文本。 我做错了吗?
1回复

图表区域外的d3js网格

我已经用d3js库创建了一个图表。 有什么方法可以使网格线超出图表的区域,如何在图像上显示网格线 ? 轴创建功能: 将图表添加到svg: