SVG + Chrome：带有许多圆圈的奇怪渲染

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。 正如我在 cmets 中提到的，我录制了一段关于我放大 Plunker 演示时发生的奇怪行为的短视频，以防它比我单独用文字能够更好地描述问题：

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

Answer 1

对于关注此帖子的任何人，截至大约 2 天前，其他人在 Chromium 上报告了一个错误（Mac 上的 Chrome）：

Chromium Bug Report