繁体   English   中英

D3JS:滚动时向下调整图表大小

D3JS: chart resizes when scrolling and down

提示:本站收集StackOverFlow近2千万问答,支持中英文搜索,鼠标放在语句上弹窗显示对应的参考中文或英文, 本站还提供   中文繁体   英文版本   中英对照 版本,有任何建议请联系yoyou2525@163.com。

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

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

3 D3js图表响应

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

4 d3 js闪亮的交互式调整大小

我目前正在尝试使用 d3 js 可视化 (r2d3) 将以下和弦图实现到我的 R Shiny 应用程序中: http ://bl.ocks.org/NPashaP/ba4c802d5ef68f70c019a9706f77ebf1 但是,svg 的大小似乎是固定的,不会根据浏览器窗口的大小调整大小。 ...

6 如何在D3 JS中调整矩形大小

现在,我可以调整一个圆圈的大小。 我已经使用g.append('svg:rect')创建了一个矩形,但是我不确定如何在d3中调整矩形的大小 这是我尝试过的: HTML: 这是现场演示: https : //jsbin.com/dejewumali/edit?html,js ...

2015-07-03 12:08:20 2 3782   d3.js
7 向下滚动页面时如何调整图像大小?

我正在为网站创建导航栏,但是似乎无法使它正常工作。 我希望徽标在您向下滚动网站时缩小。 我已经尝试过webkit动画的东西,以及一些javascript / jQuery函数,但是他们不想合作。 这是我玩过的当前功能,似乎不喜欢它。 我如何解决它? HTML: CSS: ...

8 向下滚动时如何调整图像大小?

我试图在上图中可视化我的问题。 我在ScrollView中有一个ImageView。 我已经修改了开始位置,因此ImageView的一部分从屏幕上方开始ScrollView.srollTo(0,[value&gt; 0])。 问题是: 我想显示当滚动视图位于开始位置时裁剪的 ...

9 jQuery鼠标向下调整大小

嗨,我在图像中有一个要求热点选择热点问题类型admin,我们需要捕获该热点位置。在用户端基于点击,我们需要找出用户点击是否有效。 我正在获得职位,但我面临的问题是鼠标按下时热点重新调整大小,任何人都可以帮助我完成任务..鼠标按下并同时调整大小的问题 找到链接 http://jsfi ...

10 图表,但使用d3js时没有数据库

昨天我使用d3.js在一页中创建了两个图表。 问题是-该页面仅显示一个图表的一个数据库,另一个图表没有任何数据库,但是显示了x轴和y轴。 有谁知道为什么会这样以及如何解决? 非常感谢。 这里给出了我的代码: 这里给出了我的01.tsv文件: date1 close ...

2016-07-13 02:18:12 1 39   d3.js
暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2022 STACKOOM.COM