1

我有一个使用 d3js 的 SVG 图表。我们可以在此图表中添加一些点并移动它。当我有一个大页面时，当我们需要滚动它时，它可以使用鼠标。但是我有一个多点触控的输入屏幕，而且我开发了我的移动应用程序。

带有图表的输入和滚动不能与输入触摸一起使用。例如，如果我想移动我的观点，它是滚动的页面，而不是我的观点移动。这与 firefox、IE 和我的 Windows RT 应用程序上的错误并不完全相同。

你可以在这里看到一个小例子来测试你是否有输入触摸，我猜平板电脑和智能手机的行为与我的带有触摸屏的 PC 相同。我有以下 css 来模拟更大的应用程序：

body {
overflow:visible;
width: 2000px;
height: 2000px;
}

有办法做到这一点吗？

我希望你明白我的问题:)

4

2 回答 2

1

我在手机上对此进行了测试，并试图研究如何强制浏览器停止滚动，但收效甚微。好消息是您的应用程序允许移动用户非常好地放置新点。

为了快速完成项目，您可能需要创建一组控件来获取每个现有点的 id，并允许移动用户使用按钮移动所需的点。如果做得好，这样一组控件的 UI 可以是最小的和直观的。您可以将 UI 设置为 display:none 并且仅在屏幕宽度/高度为 iPad 尺寸或更小时显示。

于 2013-07-12T16:08:10.340 回答
0

我最终在 css 中找到了带有指针事件属性的解决方案

    var C1 = document.getElementById("C1"),
      evtIn = window.navigator.msPointerEnabled ? "MSPointerDown" : "touchstart",
evtOut = window.navigator.msPointerEnabled ? "MSPointerUp" : "touchend";


C1.addEventListener(evtIn, function () {

    d3.select("#C1").style("pointer-events", "all");

    d3.select("body").style("overflow", "hidden");

}, false);

C1.addEventListener(evtOut, function () {

    d3.select("#C1").style("pointer-events", "none");

    d3.select("body").style("overflow", "auto");

}, false);

在触摸开始时，我只允许图表中的指针事件并禁用溢出，并以另一种方式用于触摸结束。

于 2013-07-15T12:18:52.447 回答