Question

我有一个SVG视图，其中填充了由D3生成的~2500个形状。当我将鼠标悬停在一个形状上时，我想要一个工具提示出现在它上面。主要是HTML布局如下所示：

<div id="main">
  <div>
    <svg width="1000" height="800">
      <g>
        <path transform="translate(249,432)scale(1,1) d="m0,-10.229169346871444l8.858720514003744,10.229169346871442l-8.85872051400374,-5.114584673435718l-7.105427357601002e-15,-5.114584673435729z""></path>
        . . . . . . .
        <path transform="translate(349,332)scale(1,1) d="m0,-10.229169346871444l8.858720514003744,10.229169346871442l-8.85872051400374,-5.114584673435718l-7.105427357601002e-15,-5.114584673435729z""></path>
        <path transform="translate(149,232)scale(1,1) d="m0,-10.229169346871444l8.858720514003744,10.229169346871442l-8.85872051400374,-5.114584673435718l-7.105427357601002e-15,-5.114584673435729z""></path>
      </g>
    </svg>
  </div>

  <div id="tooltip" class="hidden">
    Hello World!
  </div>
</div>

这是工具提示的CSS：

#tooltip {position: absolute; top: 150; left: 150;}
.hidden {display: none;}

使用Javascript我将onmouseover个事件附加到每个path元素。触发事件时会发生以下情况：

var bin_mouseover = function() {
  var hex = d3.select(this),
      tooltip = d3.select();
  hex.attr('transform', hex.attr("transform").replace(/scale(.*)/g,"") + "scale(1.3)");
  tooltip.classed("hidden", false);
}

我注意到对此事件的反应非常缓慢。在Crome开发人员工具中使用Paint Rectangles我已经注意到，当事件被触发时，整个div#main视图的区域被重新绘制，而不是仅重新绘制path和{{1}的区域}。

对我来说更奇怪的是，在JS函数中，我只留下div#tooltip缩放部分，然后只重绘相应hex.attr的区域。此外，如果我只留下path部分，隐藏工具提示视图，则只重新绘制其区域。

但是当我同时修改tooltip.classed和path时，div#hexbin覆盖的整个区域都会被重新绘制，从而导致渲染所有~2500个SVG元素，这明显变慢了。

有谁知道这种行为的原因以及如何对其进行优化？

编辑1：我做了另一个观察：

在Firefox中，它的执行速度也很慢，但如果不改变div#main的{{1}}属性，我会更改它的类，它会有效地改变路径的边框颜色，那么它就可以了非常快。但是在Safari和Chrome等Webkit浏览器中，它仍然运行缓慢，而Paint Rectangles仍然显示整个父transform被重新绘制。

隐藏div并缩放svg：path重新绘制整个父区域

0 个答案: