问安卓vs iOS上的D3.js bug
EN

Stack Overflow用户

提问于 2015-06-23 18:34:45

回答 1查看 785关注 0票数 0

如果您尝试访问此动画贝塞尔曲线D3.js动画网站(https://www.jasondavies.com/animated-bezier/)，则可以移动控制点以更改曲线的轨迹。如果你用iOS访问网站，但你不能在安卓上移动控制点，这是可行的。有人知道这是为什么吗？也许是安卓WebView的bug或实现上的缺陷？

我想弄清楚用Phonegap/Cordova编程是否值得，这样的事情让我觉得这项技术还不成熟……

javascript

android

ios

cordova

d3.js

回答 1

Stack Overflow用户

发布于 2015-11-09 06:25:09

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

由于我使用的是模拟器，并且只更改了特定的一小部分，而没有检查网站的实际工作方式，因此这个答案可能不能完全涵盖您的问题。

var w = 250,
    h = 300,
    t = .5,
    delta = .01,
    padding = 10,
    points = [{x: 10, y: 250}, {x: 0, y: 0}, {x: 100, y: 0}, {x: 200, y: 250}, {x: 225, y: 125}],
    bezier = {},
    line = d3.svg.line().x(x).y(y),
    n = 4,
    stroke = d3.scale.category20b(),
    orders = d3.range(2, n + 2);

var vis = d3.select("#vis").selectAll("svg")
    .data(orders)
  .enter().append("svg")
    .attr("width", w + 2 * padding)
    .attr("height", h + 2 * padding)
  .append("g")
    .attr("transform", "translate(" + padding + "," + padding + ")");

update();

vis.selectAll("circle.control")
    .data(function(d) { return points.slice(0, d) })
  .enter().append("circle")
    .attr("class", "control")
    .attr("r", 7)
    .attr("cx", x)
    .attr("cy", y)
    .call(d3.behavior.drag()
      .on("dragstart", function(d) {
        this.__origin__ = [d.x, d.y];
      })
      .on("drag", function(d) {
        d.x = Math.min(w, Math.max(0, this.__origin__[0] += d3.event.dx));
        d.y = Math.min(h, Math.max(0, this.__origin__[1] += d3.event.dy));
        bezier = {};
        update();
        vis.selectAll("circle.control")
          .attr("cx", x)
          .attr("cy", y);
      })
      .on("dragend", function() {
        delete this.__origin__;
      }));

vis.append("text")
  .attr("class", "t")
  .attr("x", w / 2)
  .attr("y", h)
  .attr("text-anchor", "middle");

vis.selectAll("text.controltext")
    .data(function(d) { return points.slice(0, d); })
  .enter().append("text")
    .attr("class", "controltext")
    .attr("dx", "10px")
    .attr("dy", ".4em")
    .text(function(d, i) { return "P" + i });

var last = 0;
d3.timer(function(elapsed) {
  t = (t + (elapsed - last) / 5000) % 1;
  last = elapsed;
  update();
});

function update() {
  var interpolation = vis.selectAll("g")
      .data(function(d) { return getLevels(d, t); });
  interpolation.enter().append("g")
      .style("fill", colour)
      .style("stroke", colour);

  var circle = interpolation.selectAll("circle")
      .data(Object);
  circle.enter().append("circle")
      .attr("r", 4);
  circle
      .attr("cx", x)
      .attr("cy", y);

  var path = interpolation.selectAll("path")
      .data(function(d) { return [d]; });
  path.enter().append("path")
      .attr("class", "line")
      .attr("d", line);
  path.attr("d", line);

  var curve = vis.selectAll("path.curve")
      .data(getCurve);
  curve.enter().append("path")
      .attr("class", "curve");
  curve.attr("d", line);

  vis.selectAll("text.controltext")
      .attr("x", x)
      .attr("y", y);
  vis.selectAll("text.t")
      .text("t=" + t.toFixed(2));
}

function interpolate(d, p) {
  if (arguments.length < 2) p = t;
  var r = [];
  for (var i=1; i<d.length; i++) {
    var d0 = d[i-1], d1 = d[i];
    r.push({x: d0.x + (d1.x - d0.x) * p, y: d0.y + (d1.y - d0.y) * p});
  }
  return r;
}

function getLevels(d, t_) {
  if (arguments.length < 2) t_ = t;
  var x = [points.slice(0, d)];
  for (var i=1; i<d; i++) {
    x.push(interpolate(x[x.length-1], t_));
  }
  return x;
}

function getCurve(d) {
  var curve = bezier[d];
  if (!curve) {
    curve = bezier[d] = [];
    for (var t_=0; t_<=1; t_+=delta) {
      var x = getLevels(d, t_);
      curve.push(x[x.length-1][0]);
    }
  }
  return [curve.slice(0, t / delta + 1)];
}

function x(d) { return d.x; }
function y(d) { return d.y; }
function colour(d, i) {
  stroke(-i);
  return d.length > 1 ? stroke(i) : "red";
}

/*
* 提示：该行代码过长，系统自动注释不进行高亮。一键复制会移除系统注释 
* body{font-size:1em;font-weight:400;word-spacing:normal;letter-spacing:normal;text-transform:none;font-family:Verdana, Myriad Web, Syntax, sans-serif;font-size-adjust:.58;color:#000;background:#FFF;line-height:1.58em;border-top:0;border-left:0;border-bottom:0;border-right:0;width:auto;margin:1.58em 5% 1.58em 8%;padding:0}small{font-size:.92em}big{font-size:1.17em}pre{font-family:Monotype.com, Courier New, monospace;border-top:0;border-bottom:0;line-height:1.25em;border-left:0;border-right:0;margin:.75em 0;padding:0}ol li{list-style-type:decimal}ol ol li{list-style-type:lower-alpha}ol ol ol li{list-style-type:lower-roman}table,tbody,tr,td{font-size:1em;word-spacing:normal;letter-spacing:normal;text-transform:none;font-family:Verdana, Myriad Web, Syntax, sans-serif;font-size-adjust:.58}h1{font-family:Myriad Web, Arial, Helvetica, sans-serif;font-size-adjust:.48;font-size:2em;font-weight:700;font-style:normal;text-decoration:none;word-spacing:normal;letter-spacing:normal;text-transform:none;border-top:0;border-bottom:0;border-left:0;border-right:0;text-align:left;margin:1.33em 0 .33em;padding:0}h2{font-family:Myriad Web, Arial, Helvetica, sans-serif;font-size-adjust:.48;font-size:1.75em;font-weight:500;font-style:normal;text-decoration:none;word-spacing:normal;letter-spacing:normal;text-transform:none;border-top:0;border-bottom:0;border-left:0;border-right:0;text-align:left;margin:1.75em 0 .33em;padding:0}h3{font-family:Myriad Web, Arial, Helvetica, sans-serif;font-size-adjust:.48;font-size:1.58em;font-weight:500;font-style:normal;text-decoration:none;word-spacing:normal;letter-spacing:normal;text-transform:none;border-top:0;border-bottom:0;border-left:0;border-right:0;text-align:left;margin:1.58em 0 .33em;padding:0}h4{font-family:Myriad Web, Arial, Helvetica, sans-serif;font-size-adjust:.48;font-size:1.33em;font-weight:500;font-style:oblique;text-decoration:none;word-spacing:normal;letter-spacing:normal;text-transform:none;border-top:0;border-bottom:0;border-left:0;border-right:0;text-align:left;margin:1.33em 0 .33em;padding:0}h5,dt{font-family:Myriad Web, Arial, Helvetica, sans-serif;font-size-adjust:.48;font-size:1.17em;font-weight:500;font-style:normal;text-decoration:none;word-spacing:normal;letter-spacing:normal;text-transform:none}h6{font-family:Myriad Web, Arial, Helvetica, sans-serif;font-size-adjust:.48;font-size:1em;font-weight:500;font-style:normal;text-decoration:none;word-spacing:normal;letter-spacing:normal;text-transform:none;border-top:0;border-bottom:0;border-left:0;border-right:0;text-align:left;margin:1em 0 .33em;padding:0}tfoot,thead{font-size:1em;word-spacing:normal;letter-spacing:normal;text-transform:none;font-family:Myriad Web, Arial, Helvetica, sans-serif;font-size-adjust:.48}th{vertical-align:baseline;font-size:1em;font-weight:700;word-spacing:normal;letter-spacing:normal;text-transform:none;font-family:Myriad Web, Arial, Helvetica, sans-serif;font-size-adjust:.48;text-align:left}hr{visibility:visible;color:#000;border-top:0;border-bottom:0;height:1px;border-left:0;border-right:0;text-align:left;width:100%;margin:.75em 0;padding:0}a,address,blockquote,body,cite,code,dd,del,dfn,div,dl,dt,form,h1,h2,h3,h4,h5,h6,iframe,img,kbd,li,object,ol,p,q,samp,small,span,strong,ul,var,applet,big,center,dir,font,hr,menu,pre,abbr,acronym,bdo,button,fieldset,ins,label{word-spacing:normal;letter-spacing:normal;text-transform:none;text-decoration:none;border-color:#000;border-style:none}strong{font-style:italic;background:#FFF;font-weight:700;color:#000}em strong,strong em{text-transform:uppercase;font-style:normal;font-weight:bolder;background:#FFF;color:red}b{font-weight:700}.warning{text-transform:none;font-style:normal;font-weight:bolder;background:#FFF;color:red}del{text-decoration:line-through;background:#F66}ins{text-decoration:underline;background:#FF0}address{font-style:normal;letter-spacing:.1em;border-top:0;border-bottom:0;border-left:0;border-right:0;margin:1.58em 0;padding:0}acronym{font-variant:small-caps;letter-spacing:.1em}h1,h2,h3,h4,h5,h6,dt,th,thead,tfoot{color:#000;background:#FFF}#colophon{display:none}col,colgroup,table,tbody,td,tr{color:#000;text-decoration:none;background:#FFF;border-color:#000;border-style:none}a:link{text-decoration:none;font-weight:700;color:#C00;background:#ffc}a:visited{text-decoration:none;font-weight:700;color:#999;background:#ffc}a:active{text-decoration:none;font-weight:700;color:red;background:#FC0}a:hover{text-decoration:none;color:#C00;background:#FC0}a.offsite{text-decoration:none;font-weight:400;color:#C00;background:#ffc}a,address,blockquote,cite,code,dd,del,dfn,div,dl,dt,em,form,h1,h2,h3,h4,h5,h6,iframe,img,kbd,li,object,ol,p,q,samp,small,span,strong,ul,var,applet,b,big,center,dir,font,hr,i,menu,pre,s,strike,tt,u,abbr,acronym,bdo,button,fieldset,ins,label{border-top:0;border-bottom:0;vertical-align:baseline;border-left:0;border-right:0;text-align:left;float:none;clear:none;list-style-position:outside;margin:0;padding:0}h5{border-top:0;border-bottom:0;border-left:0;border-right:0;text-align:left;margin:1.17em 0 .33em;padding:0}p{border-top:0;border-bottom:0;border-left:0;border-right:0;text-indent:0;margin:.75em 0;padding:0}dd{border-top:0;border-bottom:0;border-left:0;border-right:0;margin:0 0 .75em 1.58em;padding:0}li{border-top:0;border-bottom:0;border-left:0;border-right:0;margin:0 0 0 3.16em;padding:0}div,center{margin-top:0;margin-bottom:0;padding-top:0;padding-bottom:0;border-top:0;border-bottom:0}.stb{margin-top:2.17em;margin-bottom:.75em;padding-top:2.17em;padding-bottom:0;border-top:0;border-bottom:0;border-style:solid}.mtb{margin-top:3.08em;margin-bottom:.75em;padding-top:3.08em;padding-bottom:0;border-top:.1em;border-bottom:0;border-style:solid}.ltb{margin-top:4.34em;margin-bottom:.75em;padding-top:4.34em;padding-bottom:0;border-top:.25em;border-bottom:0;border-style:solid}col,colgroup,table,tbody,td,tfoot,th,thead,tr{border-top:0;border-bottom:0;border-left:0;border-right:0;float:none;clear:none;margin:0;padding:0}address,blockquote,dl,fieldset,form,ol,p,ul,dir,hr,menu,pre{margin-left:0;margin-right:0;padding-left:0;padding-right:0;border-left:0;border-right:0}blockquote{margin-left:1.58em;margin-right:0;padding-left:0;padding-right:0;border-left:0;border-right:0}center{margin-left:0;margin-right:0;padding-left:0;padding-right:0;border-left:0;border-right:0;text-align:left}i,var,cite,dfn,.note{font-style:italic}div > p:first-child,body > p:first-child,td > p:first-child,h1 + p,h2 + p,h3 + p,h4 + p,h5 + 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{line-height:1.33em}blockquote,fieldset,form,ul,ol,dl,dir,menu,.subhead{margin-top:.75em;margin-bottom:.75em;padding-top:0;padding-bottom:0;border-top:0;border-bottom:0}dt,ul ul,ol ol,li address,li dl,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 address,dd dl,dd ol,dd p,dd ul,dd dir,dd hr,dd menu,dd pre,dd h1,dd h2,dd h3,dd h4,dd h5,dd h6{border-top:0;border-bottom:0;border-left:0;border-right:0;margin:0;padding:0}table,td,caption{text-align:left}
*/
#adsense {
  margin-top: 1em;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <title>Animated Bézier Curves - Jason Davies</title>
    <link rel="stylesheet" href="../media/style.css">
    <script src="../media/js/jquery.min.js"></script>
    <script src="../media/js/d3.v2.min.js"></script>
    <meta name="author" content="Jason Davies">
    <style>
      .curve, .line {
        fill: none;
        stroke-width: 1px;
      }
      .curve {
        stroke: red;
        stroke-width: 3px;
      }
      .control {
        fill: #ccc;
        stroke: #000;
        stroke-width: .5px;
      }
      .t, .controltext {
        font-size: .6em;
      }
    </style>
  </head>
  <body>
    <h1>Animated Bézier Curves</h1>
    <p>Play with the control points to modify the curves!</p>
    <div id="vis">
      <script src="animated-bezier.js"></script>
    </div>
    <p>
    These animations illustrate how a parametric <a href="http://en.wikipedia.org/wiki/Bezier_Curve">Bézier curve</a> is constructed.
    The parameter <em>t</em> ranges from 0 to 1.
    In the simplest case, a first-order Bézier curve, the curve is a straight line between the control points.
    </p>
    <p>
    For a second-order or quadratic Bézier curve, first we find two intermediate points that are <em>t</em> along the lines between the three control points.
    Then we perform the same interpolation step again and find another point that is <em>t</em> along the line between those two intermediate points.
    Plotting this last point yields a quadratic Bézier curve.
    The same steps can be repeated for higher orders.
    </p>
    <p>
    Written using the <a href="http://mbostock.github.com/d3/">D3 visualisation library</a>.
    Suggested by <a href="http://graphics.stanford.edu/~mbostock/">Mike Bostock</a> and inspired by a <a href="http://en.wikipedia.org/wiki/Bezier_Curve#Constructing_B.C3.A9zier_curves">similar animation on Wikipedia</a>.
    <p>Requires a SVG-capable browser e.g. <a
      href="http://www.mozilla.org/firefox/">Mozilla Firefox</a>, WebKit (<a
      href="http://www.google.com/chrome">Google Chrome</a>, <a
      href="http://www.apple.com/safari/">Safari</a> &amp;c.) or Internet Explorer 9+.
  </body>
</html>

<p class="copyright">&copy; <a href="http://www.jasondavies.com/">Jason Davies</a> | <a href="../privacy/">Privacy Policy</a>.

<p><ins class="adsbygoogle" style="display:inline-block;width:728px;height:90px" data-ad-client="ca-pub-2911491153890039" data-ad-slot="2029654015"></ins>

<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<script>
window.google_analytics_uacct = "UA-54563-3";
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-54563-3']);
_gaq.push(['_trackPageview']);
setTimeout(function() {
  var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
  ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
  (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(ga);
}, 1);
(adsbygoogle = window.adsbygoogle || []).push({});
</script>