javascript - SVG + Chrome : Strange Rendering with Many Circles

Question

我正在使用 d3 在 chrome 上绘制数千个 SVG 圆形元素，但遇到了奇怪的渲染问题。圆圈之间似乎正在绘制路径。这些元素具有鼠标悬停事件，当鼠标悬停在它们上方时，屏幕的一小部分会重新绘制并删除该区域中的奇怪路径，但在鼠标移开后，它会返回到奇怪的线条。

预期的行为在 Safari 上有效，但在 Firefox 中根本没有绘制任何内容。

我很难弄清楚如何让它在 Chrome 上运行。我之前通过删除圆的 CSS 中的“crispEdges”属性来使该行为的较小实例消失，但这不再起作用。另外，我之前已经能够在 Chrome 中成功渲染这些点 - 不知道为什么它现在开始像这样。

有人知道为什么会发生这种情况，以及我可以做些什么来让它在 Chrome 上运行吗？非常感谢您的任何意见!

==============

Chrome 版本:56.0.2924.87

Safari 版本:10.0

绘制圆圈的JS代码:

  var xScale = d3.scaleLinear()
    .domain([0, xMax])
    .range([0, width - margin.right]); 

  var yScale = d3.scaleLinear()
    .domain([0, yMax])
    .range([height - margin.top, 0]);

  var x = function(d) { return xScale(d.x); }  
  var y = function(d) { return yScale(d.y); }

  svg.selectAll(".dot")
        .data(data)
        .enter().append("circle")
        .attr("class", "dot")
        .attr("cx", x) 
        .attr("cy", y)
        .style("fill", colors)
        .on("mouseover", function(d,i){
          tooltip.html(toolTipHTML(d))
           .style("left", (d3.event.pageX) + "px")
           .style("top", (d3.event.pageY - 28) + "px");
          return tooltip.style("visibility", "visible");
        })
        .on("mouseout", function(d){
          return tooltip.style("visibility", "hidden");
        });

CSS:

circle { 
  fill: black;
  stroke: none;
  shape-rendering: auto;
}

在 Chrome 中:

在 Safari 中:

==========

编辑:Small demo on Plunker

我曾经能够在 plunkr 上重现该问题，但刷新后问题就消失了。我尝试添加更多数据以使其再次重现，但收到了来自 plunkr 的“400-错误请求”响应。有时，当您放大圆圈时，会出现随机的“无关线”，但它们会随机消失。无论如何，如果有帮助的话，这是代码。即使刷新多次后，我上面解释的原始问题仍然是一个问题。非常感谢任何关于如何推进这一工作的想法!

==============

编辑 2/9:这可能是硬件问题。我使用的是 2015 年初的 Macbook Air；运行 macOS Sierra 10.12。正如我在评论中提到的，我录制了一段简短的视频，记录了放大 Plunker 演示时发生的奇怪行为，以防它比我单独用文字给出的问题描述更好:

https://www.youtube.com/watch?v=saAm6Rim0zw&feature=youtu.be

Answer 1

对于关注这篇文章的人来说，截至大约 2 天前，其他人在 Chromium 上报告了一个错误(Mac 上的 Chrome):

Chromium Bug Report