Question

我使用PATH在我的d3图表中绘制了21 * 9个windBarbs。示例路径如下所示：

case class Mcons[+A](head: A, tail: Mlist[A]) extends Mlist[A] {
  def map[B](f: A => B): Mlist[B] = foldRight(Mnil: Mlist[B])((h, t) => Mcons(f(h), t))
  def flatMap[B](f: A => Mlist[B]): Mlist[B] = concat(map(f))
  def filter(f: A => Boolean): Mlist[A] = 
    foldRight(Mnil: Mlist[A])((a, acc) => if (f(a)) Mcons(a, acc) else acc)
}

object Mlist {
  def map[A, B](l: Mlist[A])(f: A => B): Mlist[B] = l map f
  def filter[A](as: Mlist[A])(f: A => Boolean): Mlist[A] = as filter f
  def flatMap[A, B](as: Mlist[A])(f: A => Mlist[B]): Mlist[B] = as flatMap f
}

这在桌面网络浏览器上运行良好。但是当我在iOS Safari上运行时。由于某些原因，工具提示 - 趋势线的表现变得非常差。

我不确定导致此问题的原因。我甚至试图将这些倒钩与trendline -tooltip功能隔离开来，但仍然很慢。如果我不画这些倒钩，那么工具提示非常顺利。

所以问题是：

1）那些21 * 9倒钩使页面变得如此沉重以至于工具提示在移动浏览器上有滞后性吗？

2）什么是更好的方法呢？

申请网址：

http://ec2.buser.net/bnforecast/meteogramv2/#!/app/dashboard?start=KBTP&product=MAV

Answer 1

更好的方法是在画布中绘制所有这些路径而不是SVG，或者使用canvg库将这些路径导出到画布，然后删除SVG路径容器元素。画布比SVG轻。

另外，一个提示是使用 display：none 而不是不透明度来提升性能。

屏幕上的大量路径使iPhone上的工具提示变慢

1 个答案: