我有一个可视化效果,它本质上是一系列堆叠条形图,每个条形图都包含几个面板。例如,here是三个这样的条形图,每个都有四个面板。我已经设法实现了跨图表协调的平移/缩放功能。This例如,如果我从最后一张图像放大到第三个面板,它会是什么样子。从放置在每个图表上的不可见矩形调用缩放行为。我的问题是我想根据用户光标在绘图中的位置启用工具提示功能。然而,由于缩放矩形位于图表的顶部,因此实际图表本身中的任何SVG元素都没有注册任何鼠标事件。有人知道解决这个问题的方法吗? 最佳答案 我正在关注MikeBostock'sexample,就像你在我的
我已经构建了一个具有缩放/平移功能的d3.js散点图。您可以在此处查看完整内容(单击“在新窗口中打开”以查看完整内容):http://bl.ocks.org/129f64bfa2b0d48d27c9有几个我一直无法弄清楚的功能,如果有人能指出正确的方向,我会很乐意帮助它:我想对区域应用X/Y缩放/平移边界,这样您就不能将其拖动到特定点(例如零)以下。我还尝试过创建Googlemap风格的+/-缩放按钮,但没有成功。有什么想法吗?更不重要的是,还有几个领域我已经找到了解决方案,但它非常粗糙,所以如果您有更好的解决方案,请告诉我:我添加了一个“重置缩放”按钮,但它只是删除图表并在其位置生成
我使用ZingChartlibrary创建了一个图表一切都按预期进行。该图用于显示特定socket随时间变化的功耗。加载图表后,系统会显示该时间段的kWh消耗量。用户能够放大和缩小图表,当发生这种情况时,我想显示图表中显示的那段时间的功耗。我正在使用缩放事件:zingchart.render({id:'chartDiv',data:graphset,height:500,events:{zoom:function(p){console.log(p);console.log(zingchart.exec(p.id,'getseriesdata',{}));console.log(zing
Sitepointreference说InternetExplorerforWindowsversions5.5andabovesupportthenon-standardpropertyzoom,whichsetsthemagnificationscaleofanelement.There’snoCSS3equivalenttothisproperty(asyet).如何在标准浏览器中实现这种缩放效果?有可用的jQuery插件吗? 最佳答案 CSS3等价物在CSS2DTransforms中模块,特别是transform:scale
我创建了一个gist我的问题。我从thisexample开始.所以我的问题是,除了鼠标控件之外,我还需要一些放大和缩小按钮。鼠标控制(使用滚轮缩放和平移通过拖动)是用zoom()behaviour实现的.它工作得很好。然后我添加了两个用于放大和缩小的按钮:var_zoom=d3.zoom().scaleExtent([1/2,8]).on("zoom",zoomed);vargui=d3.select("#gui")gui.append("span").classed("zoomin",true).text("+").on("click",function(){_zoom.scaleB
我正在将我的d3代码从v3迁移到v4,但在寻找d3.zoom.x、d3.zoom.y属性的等效项时遇到问题。这是代码的一小部分,包括最重要的元素:this.init=function(obj,def){/*X-axis*/x=d3.scaleTime().range([0,width]);xAxis=d3.axisBottom(x).ticks(ticks);svg.append("g").attr("class","xaxis").attr("transform","translate(0,"+height+")");/*Y-axis*/for(vari=0;i我试过用它来代替“zo
我正在使用jquery.viewport创建一个视口(viewport)函数:我使用jqueryui创建slider和一个自己编写的缩放函数来缩放图像。此外,使用此插件创建视口(viewport)功能。http://borbit.github.com/jquery.viewport/问题是,缩放图像后,可拖动区域只是内容的一部分。这意味着我不能在它的某些区域拖动内容。无论如何要解决这个问题?谢谢HTML:Javascript$(document).ready(function(){$("#view").css("height",$(window).height());$("#view"
通过结合一些CSS和JqueryUI/可拖动,我创建了平移图像的功能,并且通过一些额外的JS,您现在可以缩放图像。我遇到的问题是,如果您放大图像,左上角是固定的,正如您所期望的那样。我想要的是图像保持居中(基于当前的平移),以便图像的中间保持在容器的中间,同时变大。我已经为此编写了一些代码但没有用,我想我的数学是错误的。谁能帮忙?我希望它像this一样工作做。当您滚动到图像时,它会根据当前平移使图像居中,而不是从Angular落缩小。HTML:Javascript:$("#_popup_creator.user_image").bind('mousewheel',function(ev
我正在开发一个嵌入页面的Canvas应用程序。我有它,因此您可以使用鼠标滚轮放大绘图,但不幸的是,这会滚动页面,因为它是文章的一部分。当我在dom元素上滚动鼠标时,是否可以阻止鼠标滚轮在窗口上滚动?! 最佳答案 为鼠标滚轮(非Gecko)/DOMMouseScroll(非IE)附加事件处理程序并阻止其默认操作(即滚动内容):if(element.addEventListener)element.addEventListener("DOMMouseScroll",function(event){event.preventDefault
nvd3中是否有缩放功能,我可以直接在我的R源代码中输入(只要我不必更改nvd3源代码,它是否需要javascript无关紧要)?我尝试了lineWithFocusChart,但它只沿x轴缩放,而我想理想地在缩放部分周围绘制一个框,它会缩放到我绘制框的位置。即使那是不可能的,如果nvd3支持任何类型的二维缩放,那就太棒了!到目前为止,我已经提供了一个可重现的示例,但我还没有找到我正在寻找的缩放功能。谢谢!library(rCharts)temp'+'x:'+x+''+'y:'+y}!#",showLegend=FALSE,margin=list(left=200,right=100,b