Javascript Android与iOS上的D3.js漏洞

如果尝试访问此动画bezier curve D3.js动画网站（），可以移动控制点以更改曲线的轨迹。如果您使用iOS登录网站，但无法在Android上移动控制点，则此功能有效。有人知道这是为什么吗？可能是Android的WebView的bug或实现缺陷

---

我试图弄清楚使用Phonegap/Cordova编程是否值得，这类事情让我觉得技术还不成熟…

我发现这个问题的原因是拖动事件与触摸屏的兼容性，它在D3.js v3中得到了修复。这里显示了一个镜像网站的演示片段，唯一的变化是加载了更新版本的D3.js

因为我使用的是一个模拟器，只改变了一个特定的小部分，而没有检查网站的实际工作方式，所以这个答案可能无法完全解决您的问题

var w=250，
h=300，
t=0.5，
增量=.01，
填充=10，
点=[{x:10，y:250}，{x:0，y:0}，{x:100，y:0}，{x:200，y:250}，{x:225，y:125}]，
贝塞尔={}，
line=d3.svg.line（）.x（x）.y（y），
n=4，
冲程=d3.scale.category20b（），
订单=d3.范围（2，n+2）；
var vis=d3。选择（“vis”）。选择全部（“svg”）
.数据（订单）
.enter（）.append（“svg”）
.attr（“宽度”，w+2*填充）
.attr（“高度”，h+2*填充）
.附加（“g”）
.attr（“转换”、“转换”（“+padding+”，“+padding+”））；
更新（）；
vis.selectAll（“圆圈控制”）
.data（函数（d）{返回点.slice（0，d）}）
.enter（）.append（“圆”）
.attr（“类”、“控制”）
.attr（“r”，7）
.attr（“cx”，x）
.attr（“cy”，y）
.call（d3.behavior.drag（））
.on（“dragstart”，功能（d）{
这个.uuu原点uuu=[d.x，d.y]；
})
.开启（“拖动”，功能（d）{
d、 x=Math.min（w，Math.max（0，this.\uuuu origin\uuuuu[0]+=d3.event.dx））；
d、 y=Math.min（h，Math.max（0，this.\uuuu origin\uuuuu[1]+=d3.event.dy））；
贝塞尔={}；
更新（）；
vis.selectAll（“圆圈控制”）
.attr（“cx”，x）
.attr（“cy”，y）；
})
.on（“dragend”，function（）{
删除此项；
}));
vis.append（“文本”）
.attr（“类别”、“t”）
.attr（“x”，w/2）
.attr（“y”，h）
.attr（“文本锚定”、“中间”）；
vis.selectAll（“text.controltext”）
.data（函数（d）{返回点.slice（0，d）；}）
.enter（）.append（“文本”）
.attr（“类”、“控制文本”）
.attr（“dx”、“10px”）
.attr（“dy”，“.4em”）
.text（函数（d，i）{返回“P”+i}）；
var last=0；
d3.计时器（功能（已用）{
t=（t+（过去的时间）/5000）%1；
最后一次=过去；
更新（）；
});
函数更新（）{
var插值=vis.selectAll（“g”）
.data（函数（d）{返回getLevels（d，t）；}）；
interpolation.enter（）.append（“g”）
.样式（“填充”，颜色）
.风格（“笔触”，颜色）；
变量圆=插值。选择全部（“圆”）
.数据（对象）；
circle.enter（）.append（“circle”）
.attr（“r”，4）；
圆圈
.attr（“cx”，x）
.attr（“cy”，y）；
变量路径=插值。选择全部（“路径”）
.data（函数（d）{return[d]；}）；
path.enter（）.append（“路径”）
.attr（“类”、“行”）
.attr（“d”，行）；
路径属性（“d”，行）；
var curve=vis.selectAll（“路径曲线”）
.数据（getCurve）；
curve.enter（）.append（“路径”）
.attr（“类”、“曲线”）；
曲线属性（“d”，直线）；
vis.selectAll（“text.controltext”）
.attr（“x”，x）
.attr（“y”，y）；
vis.selectAll（“text.t”）
.text（“t=“+t.toFixed（2））；
}
函数插值（d，p）{
如果（参数长度<2）p=t；
var r=[]；
对于（var i=1；ip:first child，td>p:first child，h1+p，h2+p，h3+p，h4+p，h6+p，div+p，p.initial{border top:0；border bottom:0；border left:0；border right:0；text align:left；text indent:0；margin:75em 0；padding:0}h1，h2，h3，h4，h5，h6，td，th{行高：1.33em}块引号，fieldset，form，ul，ol，ol，dl，dir，subhead{margin top:.75em；margin bottom:.75em；padding top:0；padding bottom:0；border top:0}dt、ul-ul、ol-ol、li-ol、li-p、li-ul、li-dir、li-hr、li-menu、li-pre、li-h1、li-h2、li-h3、li-h4、li-h5、li-h6、dd-dl、dd-ol、dd-ol、dd-p、dd-ul-dir、dd-hr、dd-menu、dd-pre-h1、dd-h2-h3、dd-h6{边框顶部：0；边框底部：0；边框左侧：0；边框右侧：0；边距：0；填充：0}表格，td，标题{文本对齐：左侧}
#广告{
边缘顶部：1米；
}

动画贝塞尔曲线-杰森·戴维斯
.曲线{
填充：无；
笔画宽度：1px；
}
.曲线{
笔画：红色；
笔画宽度：3px；
}
.控制{
填充：#ccc；
行程：#000；
笔划宽度：.5px；
}
.t、.controltext{
字体大小：.6em；
}
动画Bézier曲线
使用控制点修改曲线


这些动画演示了如何构造参数化模型。
参数t的范围为0到1。
在最简单的情况下，一阶Bézier曲线，曲线是控制点之间的直线。


对于二阶或二次Bézier曲线，首先我们找到沿三个控制点之间的直线t的两个中间点。
然后，我们再次执行相同的插值步骤，并沿这两个中间点之间的直线找到另一个点t。
绘制这最后一点可以得到二次Bézier曲线。
对于更高的阶数，可以重复相同的步骤。


使用。
由一位艺术家提出并受其启发。
需要支持SVG的浏览器，例如WebKit（，&；c.）或Internet Explorer 9+。
©；|。

window.google\u analytics\u uacct=“UA-54563-3”；
var _gaq=_gaq | |[]；
_gaq.push（[''设置帐户'，'UA-54563-3']）；
_gaq.push（[''u trackPageview']）；
setTimeout（函数（）{
var ga=document.createElement（'script'）；ga.type='tex